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内 容 提 要 


本 书 详 细 介 绍 了 SSE (Server-Sent Event， 服 务 端 推送 事件 )。SSE 是 一 种 允许 服务 端 向 客户 端 
推送 新 数据 的 HTMLS5 技术 。 利 用 这 种 技术 ， 网 页 可 以 迅速 加 载 ， 并 且 能 及 时 获得 用 户 感 兴趣 的 
最 新 数据 。 相 比 数据 拉 取 ，SSE 是 更 优 的 解决 方案 ， 能 最 大 限度 地 降低 延迟 。 本 书 通过 丰富 的 示 
例 详细 叙述 了 SSE 的 优势 、 它 在 的 日 常生 话 中 的 应 用 、 目 前 的 浏览 器 支持 情况 以 及 兼容 解决 方案 
等 内 容 。 

只 要 你 略微 了 解 一 点 HIML、HTTP 和 JavaScript， 就 可 以 顺利 阅读 本 书 。 
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人 们 对 现代 网 络 要 求 甚 高 : 不 仅 要 求 页 面 美 观 ， 加 载 迅 速 ， 还 必须 有 最 新 、 有 趣 而 且 有 价 
值 的 好 内 容 。 本 书 探讨 的 是 一 项 有 助 于 满足 后 两 个 要 求 的 技术 : 确保 你 的 网 站 或 网 络 应 用 
用 户 获 取 最 新 的 内 容 ， 并 且 毫 不 妥协 地 最 大 限度 降低 延迟 。 





本 书 还 关注 现实 生活 中 有 实用 价值 的 应 用 。 第 2 章 以 一 个 非常 好 玩 的 范例 为 基础 ， 第 6 章 
和 第 7 章 用 的 是 入 门 级 的 例子 ， 其 他 章节 则 都 是 围绕 现实 生活 中 无 处 不 在 且 又 无 法 回避 的 
完整 应 用 。 


读者 对 象 


在 现实 生活 中 ， 你 必须 是 一 个 健壮 而 谦 藉 、 热 情 而 客观 的 人 ， 你 还 必须 尊 老 爱 幼 并 且 极 度 
热爱 互联 网 。 不 过 ， 本 书 没 有 现实 世界 那么 苛刻 ， 但 你 需要 了 解 HTML ( 超 文本 标记 语 
言 ) 和 HTTP ( 超 文本 传送 协议 )， 并 且 也 知道 HTML、CSS ( 层 又 样式 表 ) 和 JavaScript 
之 间 的 区 别 。 你 至 少 应 该 能 够 阅读 并 理解 基本 的 JavaScript， 以 便 能 理解 客户 端的 代码 。 
( 当 用 到 更 为 复杂 的 JavaScript 时 ， 我 们 会 在 附注 或 附录 中 加 以 解释 。) 


























本 书 尽 可 能 保持 服务 端 语言 中 立 ， 所 用 到 的 代码 大 部 分 是 简单 的 PHP 代码 ， 因 为 对 这 类 
应 用 来 说 ，PHP 言 简 意 赎 。 只 要 你 了 解 任何 类 C 语言 ， 应 该 就 不 难 读 懂 。 如 果 有 不 懂 的 地 
方 ， 请 参阅 附录 C， 那 里 会 介绍 一 些 PHP 相关 知识 。 第 2 章 也 会 介绍 使 用 Nodejs 的 例子 。 
在 后 面 的 章节 中 ， 如 果 示 例 代码 是 PHP 专用 的 ， 我 也 会 介绍 如 何 用 其 他 语言 来 实现 。 





















































最 后 ， 你 需要 有 一 台 装 有 网 络 服务 器 (如 Apache) 的 开发 机 ， 以 便 跟 着 文中 的 范例 学 。 许 
多 Linux 系统 已 经 安装 了 Apache， 如 果 没 有 ， 安 装 起 来 也 不 难 。 举 个 例子 ， 在 Ubuntu 系 
统 中 ， 在 命令 行 终 端 输入 sudo apt-get install lamp-server 就 能 一 步 安装 Apache、PHP 














注 1: 如 果 这 个 命令 不 生效 ， 试 一 下 sudo apt-get install Lamp-server^。 译 者 注 




















和 了 MySQL。 在 Windows 系统 中 ， 有 一 个 类 似 的 集成 包 一 一 XAMPP， 它 会 给 你 提供 所 需要 
的 一 切 。 它 还 有 Mac 版 。 


本 书 结构 


SSE 的 核心 要 素 并 不 复杂 ， 第 2 章 仅 用 了 几 页 的 篇 幅 就 介绍 了 一 个 完整 可 运行 的 范例 ( 包 
括 前 端 和 后 端 )。 在 那 之 前 ， 第 1 章 会 介绍 HTMLS5 的 一 些 背 景 知 识 、 数 据 推 送 、 可 能 会 用 
到 SSE 的 应 用 ， 以 及 用 作 替 代 方 案 的 技术 。 


从 第 3 章 到 第 7 章 ， 我 们 创建 了 一 个 完整 的 应 用 ， 尽 可 能 使 它 贴近 现实 ， 同 时 又 不 会 让 你 
为 那些 不 重要 的 细 市 而 烦恼 。 这 个 应 用 所 涉及 的 领域 是 金融 数据 。 第 3 章 介 绍 这 个 应 用 的 
核心 ;第 4 章 对 它 做 了 一 些 重 构 和 扩展 ;第 5 章 处 理 了 数据 推送 应 用 中 会 出 现 的 一 些 棘 手 
的 细节 ， 比 如 复杂 的 数据 、 数 据 源 无 响应 、 套 接 字 终止 等 ， 第 6 章 介绍 了 一 种 方案 (长 轮 
询 )， 使 我 们 的 应 用 能 够 兼容 那些 尚未 支持 SSE 的 台式 机 浏览 器 和 和 手机 浏览 器 ， 第 7 章 展 
示 了 两 种 更 优 但 并 不 是 所 有 浏览 器 都 支持 的 方案 。 第 3 章 还 用 了 一 些 篇 幅 ， 介 绍 如 何 开发 
我 们 的 样本 应 用 程序 可 以 推送 的 真实 且 可 重复 使 用 的 数据 。 虽 然 这 与 SSE 不 直接 相关 ， 但 
这 非常 好 地 演示 了 数据 推送 应 用 中 的 易 济 性 设计 。 



































第 8 章 涵 盖 了 SSE 协议 的 一 些 要 素 ， 我 们 没有 将 它们 用 于 在 其 他 章 市 创建 的 实用 应 用 程序 
中 。 当 然 ， 我 们 介绍 了 没有 使 用 它们 的 原因 。 这 就 引出 了 第 9 章 来 介绍 之 前 章 市 提 到 过 但 
未 详细 阐述 的 安全 方面 的 内 容 (cookie、 权 限 控 制 、 跨 域 ) 。 


排版 约定 
以 下 是 本 书 中 使 用 的 排版 约定 : 
。 楷体 

标示 新 术语 。 


。 等 宽 字体 
用 于 程序 段 ， 或 标示 文中 提 到 的 程序 元 素 ， 比 如 变量 、 函 数 名 称 、 数 据 库 、 数 据 类 型 、 
环境 变量 、 语 句 以 及 关键 字 。 


。 等 宽 粗 体 
标示 命令 行 语句 或 其 他 需要 用 户 照 字面 输入 的 文本 。 


。 等 宽 和 斜体 


标示 应 该 用 用 户 提供 的 值 或 由 上 下 文 决 定 的 值 来 替换 的 文本 。 














到 
了 





表示 提示 或 建议 。 


表示 一 般 注解 。 


表示 警告 或 提醒 。 


使 用 代码 示例 


本 书 使 用 或 提 到 的 源码 文件 可 以 从 https://github.com/DarrenCook/ssebook 下 载 。 


本 书 的 主旨 是 希望 能 帮 你 完成 你 的 工作 。 一 般 来 说 ， 本 书 所 提 及 的 示例 代码 都 可 用 在 你 
的 程序 和 文档 中 。 除 非 你 要 复制 书 中 的 大 部 分 代码 ， 否 则 你 无 需 与 我 们 联系 获取 我 们 的 
许可 。 比 如 ， 在 你 的 程序 中 使 用 几 个 本 书 中 的 代码 块 不 需要 获取 许可 。 销 售 或 分 发 含有 
O’Reilly 出 版 的 书籍 中 的 代码 的 CD-ROM 需要 获得 许可 。 引 用 本 书 以 及 本 书 中 的 代码 来 解 
答疑 问 不 需要 获得 许可 ， 但 在 你 的 产品 文档 中 大 量 包含 本 书 中 的 示例 代码 需要 获得 许可 。 


我 们 欢迎 引用 本 书 内 容 时 加 以 说 明 ， 但 对 这 一 点 并 不 强求 。 引 用 说 明 通常 包括 书 名 、 作 
者 、 出 版 社 和 国际 标准 图 书 编号 ， 例 如 : “Data Push Apps with HTMLS SSE by Darren Cook 
(O’Reilly). Copyright 2014 Darren Cook, 978-1-449-37193-7 。 
































如 果 你 觉得 你 对 示例 代码 的 使 用 超出 了 合理 使 用 或 上 述 许可 的 范围 ， 请 发 邮件 至 


permissions@oreilly.com 与 我 们 联系 。 


Safari2 Books Online 





Safari Books Online (http://www.safaribooksonline.com) 是 应 


Safa 1。 书馆。 和 


同时 以 





Books Online 顶级 技术 和 商务 作家 的 专 】 


作品。 





加 品 





和 视频 的 形式 出 版 世界 


Safari Books Online 是 技术 专家 、 软 件 开 发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 人 士 开 展 


调研 、 解 决 问题 、 学 习 和 认证 培训 的 第 一 手 资料 。 





加 
Zl 
x 


对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 OReilly Media、Prentice 
Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit 











Press、 Focal Press、 Cisco Press、John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones & Bartlett、Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 


入 4 名 
联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 
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奥 菜 利 技术 咨询 (北京) 有 限 公 司 


OReilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 代 码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 
http://oreil.ly/data_push apps html5-sse。 

















对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : 


bookquestions(@oreilly.com 
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SSE (Server-Sent Event， 服 务 端 推送 事件 ) 是 一 种 允许 服务 端 向 客户 端 推送 新 数据 的 
HTML5 技术 。 与 由 客户 端 每 隔 几 秒 从 服务 端 轮 询 拉 取 新 数据 相 比 ， 这 是 一 种 更 优 的 解决 
方案 。 在 写作 本 书 时 ，65% 的 桌面 和 移动 浏览 器 原生 支持 这 项 技术 ,但 是 ， 本 书 将 介绍 如 
何 开发 支持 超过 99% 桌面 浏览 器 和 移动 浏览 器 的 向 后 兼容 解决 方案 。 顺 便 说 一 下 ，10 年 
前 我 只 能 用 Flash 来 实现 这 种 数据 推送 ， 事情 进 展 太 迅速 了 ， 本 书 中 已 不 会 有 任何 用 Flash 
实现 的 方案 。 











本 书 中 提 到 的 浏览 器 占 比 数据 来 自 超 赞 的 “Can I Use...” 网 站 ， 网 址 是 
http://caniuse.com/eventsource。 而 该 网 站 的 数据 则 来 自 StatCounter GlobalStats， 
网 址 是 gs.statcounter.com/。 给 那些 爱 较 真 的 人 说 明 一 下 ,“ 超 过 99%” 的 意 
思 是 “在 我 能 接触 到 的 所 有 桌面 或 移动 浏览 器 上 都 可 以 运行 "。 所 以 ， 如 果 
你 发 现 浏览 器 支持 率 没有 达到 精确 的 99%， 还 请 见谅。 

















对 那些 禁用 JavaScript 的 浏览 器 来 说 ， 不 论 是 SSE 还 是 我 们 聪明 的 向 后 兼容 解决 方案 都 不 
管用 。 但 是 ， 被 告知 “不 可 能 ”是 一 件 让 人 不 更 的 事 ， 所 以 我 会 介绍 一 种 让 这 些 浏览 右 也 
能 动态 更 新 的 方案 ( 见 6.6 市 )。 





接 下 来 ， 本 章 会 介绍 什么 是 HTML5 和 数据 推送 ， 讨 论 一 些 可 能 会 用 到 SSE 技术 的 应 用 ， 
并 会 花 点 时 间 对 比 一 下 SSE 和 WebSocket， 以 及 它们 和 根本 不 使 用 数据 推送 的 方案 的 区 
别 。 如 果 你 已 经 对 数据 推送 有 大 致 的 了 解 ， 想 直接 跳 到 第 2 章 去 看 代码 示例 ， 然 后 再 回 到 
这 里 ， 我 也 可 以 理解 。 





1.1 HTMLS 


前 面 提 到 SSE 是 一 种 HTML5 技术 。 在 现代 网 络 中 ，HTML 用 以 指定 网 页 或 应 用 的 结构 和 


内 容 ，CSS 用 以 描述 其 外 观 ，JavaScript 用 以 使 它 具 有 动态 性 和 交互 性 。 











一 





JavaScript 表达 行为 ，CSS 表达 外 观 ， 注意 ，HTML 既 表 达 结 构 ， 即 逻辑 结 
构 (DOM)， 又 表达 内 容 ， 即 数据 本 身 。 通 常 需要 更 新 数据 时 ， 并 不 需要 更 
新 结构 。 正 是 这 种 不 改变 组 织 结构 仅 改 变数 据 的 诉求 ， 推 动 了 数据 拉 取 和 数 
据 推送 技术 的 产生 。 


大 概 在 1990 年 ， 蒂 姆 . 伯 纳 斯 ~ 李 (Tim Berners-Lee) 发 明了 HTML。 官 方 从 未 正式 发 
布 HTML 1.0 标准 ， 但 在 1995 年 末 发 布 了 HTML 2.0。 那 时 候 ， 人 们 是 以 月 来 讨论 互联 网 
时 代 的 ， 因 为 这 项 技术 发 展 得 太 快 了 。HTML 2.0 因 增 加 了 表格 、 图 片上 传 以 及 图 片 映 射 
而 得 到 了 增强 。1997 年 1 月， 以 HTML 1.0 和 HTML 2.0 为 基础 的 HTML 3.2 发 布 。 同 年 
12 月 ，HTML 4.0 发 布 。 当 然 ， 中 间 有 过 一 些微 调 ， 那 就 是 XHTML 出 现 了 ， 不 过 它 基本 
上 就 是 今天 你 在 用 的 HTML ， 除 非 你 在 用 HIML5。 





大 部 分 HIML5 新 增 的 特性 都 是 可 选 的 ， 这 意味 着 绝 大 部 分 情况 下 ， 你 可 用 你 所 知道 的 
HTML 4， 然 后 选择 一 些 你 想 要 的 HTML5 特性 。HTML5 新 增 了 一 些 元 素 (包括 直接 支持 
视频 、 音 频 ， 以 及 矢量 和 位 图 绘图 ) 和 表单 控件 ， 移 除了 一 些 在 HTML 4 中 不 建议 使 用 的 
东西 。 但 对 我 们 来 说 ， 更 有 意义 的 是 ，HTML5 新 增 了 一 大 堆 JavaScript 应 用 程序 编程 接口 
(API), SSE 就 是 其 中 之 一 。 想 要 了 解 更 多 关于 HTML5 的 知识 ， 参 见 维基 百科 条 目 '。 























HTML5 新 增 特 性 的 正 交 性 意味 着 ， 虽 然 本 书 的 所 有 代码 都 是 HTML5 的 (如 代码 第 一 行 
<!doctype html> 所 示 )， 但 除了 与 SSE 直接 相关 的 部 分 ， 其 他 的 都 是 你 所 习惯 的 HTML 4， 
没有 用 到 任何 HTMLS5 的 新 标签 。 


1.2 数据 推送 

SSE 是 一 种 允许 服务 端 向 客户 端 推送 新 数据 (通常 称 作 数 据 推送 ) 的 HIML5 技术 。 那 么 ， 
究竟 什么 是 数据 推送 ? 它 与 我 们 可 能 用 过 的 其 他 技术 有 什么 不 同 呢 ? 让 我 先 来 回答 什么 不 
是 数据 推送 。 数 据 推送 有 两 种 替代 方案 : 无 更 新 方案 和 数据 拉 取 方案 。 


无 更 新 方案 (图 1-1) 是 最 简单 的 。 这 几乎 是 所 有 网 络 内 容 的 运作 方式 。 









































注 1: http://en.wikipedia.org/wiki/HTML5。 一 一 译 者 注 
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客户 端 服务 器 实际 数据 












































图 1-1: 替代 方案 之 一 : 无 更 新 方案 





在 浏览 器 中 输入 一 个 URL， 然 后 你 就 会 得 到 一 个 HTML 页 面 。 之 后 浏览 器 会 请 求 图 片 、 
CSS 文件 、JavaScript 文件 等 。 它 们 每 一 个 都 是 浏览 器 可 以 缓存 的 静态 文件 。 如 果 你 正 使 
用 的 是 后 端 语 言 ， 比 如 PHP、Ruby、Python 或 其 他 许多 为 用 户 动 态 生 成 HTML 的 语言 ， 
就 浏览 器 而 言 ， 它 接收 到 的 HTML 文件 与 手写 的 静态 HTML 文件 没什么 区 别 。( 是 的 ， 我 
知道 你 会 说 你 可 以 命令 浏览 器 不 缓存 内 容 ， 但 这 不 是 重点 ， 它 还 是 静态 的 ,) 




















另 一 种 方案 是 数据 拉 取 (如 图 1-2 所 示 )。 








客户 端 服务 器 实际 数据 

















图 1-2: 替代 方案 之 二 : 数据 拉 取 


浏览 器 会 基于 一 些 用 户 行为 ,或 在 一 定时 间 之 后 ， 或 基于 某 种 别 的 触发 方式 ， 向 服务 端 请 
求 部 分 或 全 部 最 新 数据 。 使 用 这 种 简单 粗暴 的 方式 ， 通 过 JavaScript 或 者 一 个 meta 标签 
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成 ， 要 么 是 定期 更 新 的 静态 


























人 整个 页 面 重新 加 载 。 要 做 到 这 一 点 ， 页 面 要 么 是 由 服务 端 语言 自动 生 
HTML 页 面 。 





在 更 复杂 的 情况 下 ，Ajax 技术 只 被 用 于 请 求 最 新 数据 ， 当 收 到 数据 时 ，JavaScript 函数 
会 利用 它 来 局 部 更 新 DOM。 这 里 有 一 个 很 重要 的 概念 : 仅 请 求 最 新 数据 ， 而 不 是 整个 
HTML 页 面 结构 。 这 正 是 我 们 所 说 的 数据 拉 取 的 要 义 : 仅 拉 取 新 数据 ， 并 且 只 更 新 页 面 中 


受到 影响 的 部 分 。 


术语 提示 : Ajax? DOM? 
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人 





告诉 你 它 代表 什么 ， 那 只 会 让 你 
使 用 XML。 不 过 ，Ajax 中 的 了 很 难 讨论 ， 














介绍 Ajax， 在 没有 原生 支持 SSE 的 浏览 器 中 将 会 用 到 它 。 我 不 会 
困惑 。 和 毕竟 ， 它 不 是 必须 异步 ， 也 不 是 必须 





> AE ia EE 


尔 肯定 需要 JavaScript。 


DOM 又 是 什么 呢 ? 它 是 Domcument Object Model (文档 对 象 模型 ) 的 缩 




















略 形式 。 它 是 代表 当前 网 页 的 数据 结构 。 如 果 你 用 原生 JavaScript 写 过 
document .getELementById('x')...， 或 者 用 jQuery 写 过 $C('#x')...， 那 么 你 


一 直 都 在 使 用 DOM。 





这 些 都 不 是 数据 推送 。 数 据 推送 不 是 静态 文件 ， 也 不 涉及 浏览 器 为 最 新 数据 而 发 起 请 求 。 
数据 推送 是 由 服务 端 选 择 向 客户 端 发 送 新 数据 ( 见 图 1-3)。 








客户 端 








实际 数据 








1-3: 数据 推送 


当 数据 源 有 新 数据 时 ， 服 务 端 能 立刻 将 它 发 送 给 一 个 或 多 个 客户 端 ， 而 不 用 等 客户 端 来 请 
求 。 这 些 新 数据 可 以 是 突 发 新 闻 、 最 新 的 股价 、 来 自 线 上 朋友 的 聊天 信息 、 新 的 天 气 预 
报 、 策 略 游戏 中 的 下 一 步 等 。 
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数据 拉 取 和 数据 推送 的 功能 目标 是 一 样 的 : 让 用 户 看 到 最 新 数据 。 但 数据 推送 有 一 些 优 
势 。 或 许 最 大 的 优势 就 是 更 低 的 延迟 。 假 设 一 个 数据 包 在 服务 端 与 客户 端 之 间 的 传输 时 间 
是 100 毫秒 ， 数 据 拉 取 客 户 端 以 10 秒 为 间隔 轮 询 拉 取 。 用 数据 推送 方式 ， 客 户 端 会 在 服 
务 端 读 入 数据 100 毫秒 后 看 到 数据 ， 用 数据 拉 取 方式 ， 客 户 端 会 在 服务 端 读 入 数据 100 至 
10 100 毫秒 (平均 5100 毫秒 ) 后 看 到 数据 : 这 都 取决 于 轮 询 请 求 的 时 间 选 择 。 平 均 来 看 ， 
数据 拉 取 方式 的 延迟 是 数据 推送 方式 的 51 倍 多 。 如 果 数 据 拉 取 方 式 改 为 每 2 秒 轮 询 一 次 ， 
平均 时 间 会 下 降 到 1100 毫秒 ， 仅 仅 是 数据 推送 方式 的 11 倍 多 。 但 是 ， 如 果 没 有 新 数据 到 
达 ， 这 也 会 导致 更 多 的 请 求 和 资源 〈 比 如 带宽 、CPU 等 ) 浪费 。 


在 数据 拉 取 方式 中 ， 权 衡 会 让 你 很 纠结 : 要 缩短 延迟 就 要 提高 轮 询 频 次 ， 要 市 省 带宽 和 连 
接 就 要 降低 轮 询 频 次 。 延 迟 和 带宽 ， 哪 个 更 重要 ? 当 你 说 “都 重要 ”， 那 就 是 你 需要 数据 
推送 技术 的 时 候 了 。 


1.3 数据 推送 的 其 他 名 称 


对 数据 推送 的 需求 可 以 追溯 到 Web 诞生 的 时 候 *。 多 年 来 ， 人 们 找到 了 很 多 新 奇 的 解决 
方案 ， 其 中 大 部 分 都 存在 人 们 不 期 望 看 到 的 折 中 方式 。 你 也 许 听 说 过 一 些 其 他 的 技术 : 
Comet、Ajax Push、Reverse Ajax、HTTP Streaming， 还 一 直 在 想 它 们 之 间 有 什么 不 同 。 实 
际 上 ， 这 些 都 属于 我 们 将 在 第 6 章 和 第 7 章 中 探讨 的 向 后 兼容 解决 方案 。 后 来 又 增加 了 
SSE， 它 是 一 种 兼 具 易 用 性 和 高 效 性 的 新 增 HTMLS5 技术 。 如 果 你 的 浏览 器 支持 SSE， 它 
总 是 ” 比 Comet 技术 优越 。( 本 章 后 面 会 讨论 SSE 和 WebSocket 的 区 别 。) 





























顺便 说 一 下 ， 有 时 你 会 看 到 SSE 被 人 称 为 EventSource， 因 为 那 是 它 在 JavaScript 中 相关 对 
象 的 名 字 。 本 书 会 使 用 SSE 这 个 名 字 ， 只 会 在 涉及 JavaScript 对 象 时 使 用 EventSource。 


1.4 可 能 会 用 到 SSE 的 应 用 


SSE 对 什么 有 用 ? 当 你 需要 用 新 数据 局 部 更 新 网 络 应 用 时 ，SSE 便 脱颖而出 ， 它 不 会 要 求 
用 户 执行 任何 操作 。 我 们 将 以 一 个 推送 外 汇价 格 的 应 用 为 例 ， 探 索 如 何 实现 数据 推送 和 
SSE。 我 们 的 目标 是 每 当 经 纪 人 那里 的 欧元 /美元 〈 欧 元 竞 美 元 ) 汇率 变化 时 ， 新 的 价格 
会 出 现在 浏览 器 上 ， 尽 可 能 像 现 实 中 一 样 及 时 。 


这 个 例子 完全 适用 于 SSE 处 理 资料 传送 的 标准 : 更 新 频 紧 、 低 延迟 ， 并 且 数 据 都 是 从 服务 
端 到 客户 端 (客户 端 不 需要 将 价格 数据 推送 回 服务 器 )。 我 们 示例 中 的 后 端 会 使 用 杜撰 的 















































注 2: 如 果 你 认为 数据 推送 和 数据 拉 取 只 在 Ajax (在 2005 年 开始 流行 ) 出 现 之 后 才 成 为 可 能 ， 再 想 想 ， 
Flash 6 在 2002 年 3 月 发 布 ， 提 供 了 可 以 实现 数据 推送 和 数据 拉 取 的 Flash Remote 技术 ， 并 且 还 不 用 
办 浏览 器 不 同 而 烦恼 ( 那 时 几乎 每 个 人 的 浏览 器 上 都 装 了 Flash ) 。 

注 3: 好 吧 ， 并 不 是 总 是 ， 参 见 1.6 节 和 6.3 节 附 注 栏 “长 轮 询 是 否 总 是 比 常规 轮 询 好 ”。 
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价格 数据 ， 但 使 用 真实 数据 (无 论 是 汇率 还 是 其 他 数据 ) 的 时 候 其 实 都 一 样 。 


稍微 有 点 想象 力 ， 你 就 能 明白 这 个 例子 如 何 应 用 到 其 他 领域 : 在 拍卖 网 络 应 用 中 推送 最 新 
出 价 ， 在 售 书 网 站 推送 新 评论 ， 在 在 线 游 戏 中 推送 新 高 分 ， 推 送 你 感 兴趣 的 最 新 微 博 或 用 
你 感 兴趣 的 关键 词 推送 新 闻 类 文章 ， 推 送 你 在 自家 后 院 建立 的 那个 由 Kickstarter 资助 的 核 
聚变 反应 堆 中 心 的 最 新 温度 。 


























还 有 一 些 应 用 会 发 一 些 提示 ， 比 如 像 Facebook 这 样 的 社交 网 站 ， 当 有 新 消息 到 来 时 ， 应 用 
的 某 个 位 置 会 出 现 一 个 浮 层 ， 然 后 渐渐 隐 去 ; 或 者 像 Gmail 这 样 的 邮箱 服务 界面 ， 每 当 有 
新 邮件 时 会 在 你 的 收 件 箱 里 现 新 的 提示 ; 或 者 连 上 日 历 ， 在 会 议 即将 开始 前 给 你 发 送 一 条 
通知 ;或 者 在 你 的 某 个 服务 器 上 的 磁盘 使 用 率 增高 时 向 你 提出 警示 …… 尽 情 和 畅想 吧 ! 


聊天 类 应 用 呢 ? 聊天 由 两 部 分 组 成 : 在 聊天 室 中 接收 其 他 人 的 信息 (也 可 以 是 其 他 动态 ， 
比如 成 员 进 出 聊天 室 、 资 料 修改 等 ) ;发 送 你 自己 的 信息 。 这 种 双向 沟通 一 般 非常 适合 用 
WebSocket ( 稍 后 我 们 会 具体 看 一 下 )， 但 这 并 不 意味 着 它 不 适合 用 SSE。 发 送 自己 信息 的 
部 分 ， 用 古老 的 Ajax 请 求 的 方式 就 挺 好 。 





























作为 适合 用 SSE 的 聊天 类 应 用 范例 ， 它 可 用 来 推送 你 感 兴趣 的 微 博 ， 与 此 同时 ， 用 一 个 独 
立 的 连接 供 你 撰写 自己 的 微 博 。 或 者 想象 一 个 在 线 游戏 ， 用 SSE 将 新 分 数 发 送 给 所 有 玩 
家 ， 而 你 只 需 设法 在 游戏 结束 时 把 每 个 玩家 的 最 终 分 数 发 到 服务 器 。 或 者 想象 一 个 多 人 的 
实时 策略 游戏 : 当前 面板 位 置 不 断 更 新 ， 并 且 通 过 SSE 分 发 给 所 有 玩家 ， 然 后 在 你 需要 将 
某 个 玩家 的 动作 发 送 到 中 央 服 务 器 时 使 用 Ajax 通道 。 























1.5 和 WebSocket 的 对 比 


你 可 能 听 说 过 另 一 种 叫做 WebSocket 的 HTML5 技术 ， 它 也 能 从 服务 端 向 客户 端 推送 数 
据 。 那 如 何 决定 你 是 用 SSE 还 是 WebSocket 呢 ? 概括 来 说 ，WebSocket 能 做 的 ，SSE 也 能 
做 ， 反 之 亦 然 ， 但 在 完成 某 些 任务 方面 ， 它 们 各 有 千秋 。 


WebSocket 是 一 种 更 为 复杂 的 服务 端 实现 技术 ， 但 它 是 真正 的 双向 传输 技术 ， 既 能 从 服务 
端 向 客户 端 推送 数据 ， 也 能 从 客户 端 向 服务 端 推送 数据 。 

WebSocket 和 SSE 的 浏览 器 支持 率 差 不 多 ， 大 多 数 主流 桌面 浏览 器 两 者 都 支持 *。 在 
Android 4.3 以 及 更 早 的 版 本 中 ， 系 统 默认 剖 览 器 两 者 都 不 支持 ，Firefox 和 Chrome 则 完全 
支持 ，Android 4.4 中 ， 系 统 默认 训 览 器 两 者 都 支持 ，Safari 从 5.0 开始 支持 SSE (iOS 系统 
从 4.0 开始 ) ， 但 直到 6.0 才 正 确 地 支持 WebSocket (6.0 之 前 的 Safari 所 实现 的 WebSocket 
协议 存在 安全 问题 ， 所 以 一 些 主流 浏览 器 已 经 禁用 了 基于 这 个 协议 的 实现 )。 








注 4: Kickstarter 是 一 个 创意 方案 的 众 筹 网 站 平台 。 一 一 译 者 注 
注 5: 下 是 个 例外 ， 即 便 正 11 都 还 不 支持 原生 SSE，IE10 添加 了 WebSocket 支持 。 
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与 WebSocket 相 比 ，SSE 有 一 些 显著 的 优势 。 我 认为 它 最 大 的 优势 就 是 便利 :不 需要 添加 
任何 新 组 件 ， 用 任何 你 习惯 的 后 端 语言 和 框架 就 能 继续 使 用 。 你 不 用 为 新 建 虚 拟 机 、 弄 一 
个 新 的 卫 或 新 的 端口 号 而 劳 神 ， 就 像 在 现 有 网 站 中 新 增 一 个 页 面 那样 简单 。 我 喜欢 把 这 称 
为 既 存 基础 设施 优势。 











SSE 的 第 二 个 优势 是 服务 端的 简洁 。 我 们 将 在 第 2 章 中 看 到 ， 服 务 端 代码 只 需 几 行 。 相 对 
而 言 ，WebSocket 则 很 复杂 ， 不 借助 辅助 类 库 基 本 搞 不 定 (我 试 过 ， 令 人 痛苦 )。 














I 


因为 SSE 能 在 现 有 的 HTTP/HTTPS 协议 上 运作 ， 所 以 它 能 直接 运行 于 现 有 的 代理 服务 器 
和 认证 技术 。 而 对 WebSocket 而 言 ， 代 理 服务 器 需要 做 一 些 开发 (或 其 他 工作 ) 才能 支 
持 ， 在 写 这 本 书 时 ， 很 多 服务 器 还 没有 (虽然 这 种 状况 会 改善 )。SSE 还 有 一 个 优势 : 它 
是 一 种 文本 协议 ， 脚 本 调试 非常 容易 。 事 实 上 ， 在 本 书 中 ， 我 们 会 在 开发 和 测试 时 用 curl， 
甚至 直接 在 命令 行 中 运行 后 端 脚本 。 








务 
能 














不 过 ， 这 就 引出 了 WebSocket 相 较 SSE 的 一 个 潜在 优势 WebSocket 是 二 进 制 协议 ， 而 
SSE 是 文本 协议 (通常 使 用 UTF-8 编码 ) 。 当 然 ， 我 们 可 以 通过 SSE 连接 传输 二 进 制 数据 : 
在 SSE 中 ， 只 有 两 个 具有 特殊 意义 的 字符 ， 它 们 是 CR 和 LF， 而 对 它们 进行 转 码 并 不 难 。 
但 用 SSE 传输 二 进 制 数据 时 数据 会 变 大 ， 如 果 需 要 从 服务 端 到 客户 端 传输 大 量 的 二 进 制 数 
据 ， 最 好 还 是 用 WebSocket。 



































二 进 制 数据 和 二 进 制 文件 


如 果 你 正 打算 通过 WebSocket 或 SSE 传输 二 进 制 文件 ， 停 下 来 想 想 是 否 真 的 需要 这 
么 做 。 用 HTTP 不 是 更 好 吗 ? 免得 重复 造 轮子 (权限 控制 、 加 密 、 代 理 、 缓 存 、 长 连 
接 ， 等 等 ) 。 如 果 你 关心 的 是 连接 套 接 字 的 有 效 使 用 ， 好 好 看 看 HTTP/2.0"。 

我 说 “大 量 的 二 进 制 数据 ”意思 是 你 需要 在 浏览 器 中 实现 一 个 二 进 制 网 络 协 议 ， 比 如 
SSH。 如 果 只 是 想 向 用 户 推 送 一 个 新 的 横幅 广告 图 片 ， 最 好 的 方式 是 通过 SSE (或 者 
WebSocket) 推送 图 片 的 URL， 然 后 让 浏览 器 通过 HTTP 获取 图 片 。 











WebSocket 相 较 SSE 最 大 的 优势 在 于 它 是 双向 交流 的 ， 这 意味 向 服务 端 发 送 数 据 就 像 从 服 
务 端 接收 数据 一 样 简单 。 用 SSE 时 ， 一 般 通 过 一 个 独立 的 Ajax 请 求 从 客户 端 向 服务 端 传 
送 数 据 。 相 对 于 WebSocket， 这 样 使 用 Ajax 会 增加 开销 ， 但 也 就 多 一 点 点 而 已 "。 如 此 一 
来 ， 问 题 就 变 成 了 “什么 时 候 需要 关心 这 个 差异 ? ”如果 需要 以 1 次 / 秒 或 者 更 快 的 频率 
向 服务 端 传输 数据 ， 那 应 该 用 WebSocket。0.2 次 / 秒 到 1 次 / 秒 的 频率 是 一 个 灰色 地 带 ， 

















注 6: 参见 http:/en.wikipedia.org/wiki/HTTP_2.0， 或 者 Hya Grigorik 写 的 《Web 性 能 权威 指南 》( 人 民 邮 电 
出 版 社 ) 。 

注 7: 在 HTTP/1.1 中 大 概 几 百 字 节 ， 如 果 请 求 中 有 大 量 的 cookie 或 其 他 东西 ， 这 个 量 会 更 多 一 些 。 在 
HTTP/2.0 中 会 少 很 多 。 
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用 WebSocket 和 用 SSE 差别 不 大 ， 但 如 果 你 期 望 重负 载 ， 那 就 有 必要 确定 基准 点 。 频 率 低 
于 0.2 次 / 秒 左右 时 ， 两 者 差别 不 大 。 


从 服务 端 向 客户 端 传输 数据 的 性 能 如 何 ? 如 果 是 文本 数据 而 非 二 进 制 数据 (如 前 文 所 提 到 
的 )，SSE 和 WebSocket 没什么 区 别 。 它 们 都 用 TCP/IP 套 接 字 ， 都 是 轻 量 级 协议 。 延 迟 、 
带宽 、 服 务 器 负载 等 都 没有 区 别 ， 除 非 …… 呢 ? 除非 什么 ? 


当 你 在 享用 SSE 的 既 存 基础 设施 优势 ， 并 在 客户 端 和 服务 端 脚本 之 间 设 了 一 个 网 络 服务 
器 ， 区 别 就 显现 出 来 了 。 一 个 SSE 连接 不 仅 使 用 一 个 套 接 字 ， 还 会 占用 一 个 Apache 线程 
或 进程 ， 如 果 用 PHP， 它 会 为 这 个 连接 专门 创建 一 个 PHP 新 实例 。Apache 和 PHP 会 使 用 
大 量 的 内 存 ， 这 会 限制 服务 器 所 能 支持 的 并 行 连接 数 。 所 以 ， 要 做 到 用 SSE 在 数据 传输 性 
能 上 和 WebSocket 完全 一 样 ， 需 要 写 一 个 你 自己 的 后 端 服 务 器 ， 当 然 ， 那 些 在 任何 情况 下 
都 会 用 自己 的 服务 器 并 使 用 Node.js 的 人 ,会 觉得 这 有 什么 稀奇 的 。 第 2 章 会 介绍 怎么 用 
Node.js 来 做 这 些 。 





























说 一 下 WebSocket 在 旧版 本 浏览 器 上 的 兼容 。 写 这 本 书 的 时 候 ， 大 约 超过 2/3 的 浏览 器 支 
持 这 些 新 技术 ， 移 动 端 浏 览 器 的 支持 率 会 低 一 些 。 依 惯例 ， 每 当 需 要 双向 套 接 字 时 ， 就 会 
用 到 Flash， 并 且 WebSocket 的 向 后 兼容 通常 是 用 Flash 来 做 ， 这 已 经 相当 复杂 了 ， 如 果 浏 
览 器 上 没有 Flash， 情 况 更 糟 。 概 括 来 说 ，WebSocket 难 兼 容 ，SSE 易 兼 容 。 


米 A 下 + 十:* 口 入 
1.6 ”什么 时 候 数据 推送 是 错误 的 选择 
这 一 节 要 讲 的 大 部 分 内 容 ， 对 HTML5 数据 推送 技术 (SSE 和 WebSocket) 和 将 在 第 6 章 、 
第 7 章 讲 到 的 向 后 兼容 解决 方案 都 适用 ， 它 们 的 共同 点 在 于 ， 都 会 为 每 一 个 客户 端 连接 打 
开 一 个 专门 的 套 接 字 。 


首先 来 考虑 静态 的 情况 ， 不 引入 数据 推送 。 每 当 用 户 打 开 一 个 页 面 ， 在 浏览 器 和 服务 器 之 
间 就 会 打开 一 个 套 接 字 连接 。 服 务 器 收集 信息 然后 返回 给 用 户 ， 可 能 会 很 简单 ， 就 像 从 磁 
盘 上 加 载 一 个 静态 HTML 文件 或 一 张 图 片 一 样 ， 也 可 能 会 很 复杂 ， 就 像 要 运行 一 段 用 以 连 
接 很 多 数据 库 的 后 端 语言 ， 将 CoffeeScript 编译 成 JavaScript， 然 后 把 它们 结合 到 一 起 (用 
一 个 服务 端 模板 ) 并 和 返回。 这 里 的 关键 点 是 ， 一 旦 返回 了 所 需 的 信息 ， 套 接 字 就 会 关闭 *。 
每 个 HTTP 请 求 都 会 打开 一 个 这 种 生命 期 相对 较 短 的 套 接 字 连 接 ， 但 这 些 套 接 字 是 服务 器 
上 的 有 限 资源 ， 每 当 它 们 完成 既定 任务 ， 就 会 被 回收 以 循环 再 利用 。 这 真是 相当 环保 啊 ， 
居然 没有 政府 部 门 给 它 捐 款 。 


现在 对 比 看 一 下 数据 推送 。 一 个 请 求 永远 不 会 完成 : 总 是 有 更 多 信息 要 发 送 ， 所 以 套 接 字 会 



























































注 8: 事实 上 大 部 分 请 求 使 用 HTTP 持久 连接 ， 它 会 共享 第 一 个 HTTP 请 求 和 图 片 之 间 的 套 接 字 ， 这 个 连接 
会 在 停止 活跃 几 秒 (Apache 2.2 中 是 5 秒 ) 后 关闭 。 提 到 这 个 只 是 为 了 解释 清楚 ， 并 不 影响 普通 网 络 
方案 和 数据 推送 方案 的 比较 。 
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一 直 保持 打开 状态 。 显 然 ， 因 为 它们 是 有 限 的 资源 "， 所 以 同一 时 刻 的 SSE 连接 数 会 有 限制 。 


可 以 这 样 想象 一 下 : 你 在 为 你 最 新 的 一 个 应 用 提供 电话 服务 支持 ， 有 10 个 接线 中 心 员工 
为 1000 个 用 户 提供 服务 。 当 一 个 用 户 遇 到 问题 并 拨打 客服 电话 ， 其 中 一 个 接线 员 接 线 ， 
帮 他 解决 问题 ， 然 后 挂 线 。 困 的 时 候 ， 一 些 接线 员 没 有 电话 可 接 ， 忙 的 时 候 ， 全 部 10 个 
接线 员 都 在 忙 而 且 还 有 新 的 客户 呼叫 在 排队 ， 直 到 其 中 有 一 个 接线 员 挂 线 。 这 就 是 典型 的 
网 络 服务 模式 。 














但 是 ， 现 在 想象 一 下 你 有 一 个 客户 打 进 来 并 且说 :“ 我 现在 没有 问题 ， 但 我 在 接 下 来 的 几 
个 小 时 会 用 你 们 的 软件 ， 并 且 如 果 遇 到 问题 ， 我 希望 能 立即 答复 ， 并 且 不 会 有 被 搁置 的 风 
险 ， 所 以 ， 请 问 您 可 以 就 这 样 保持 电话 畅通 吗 ? ”如 果 你 提供 这 项 服务 ， 而 这 位 客户 没有 
问题 要 问 ， 那 么 在 与 他 保持 通话 的 那 几 个 小 时 ， 呼 叫 中 心 10% 的 服务 资源 就 浪费 了 。 如 果 
10 个 客户 这 样 做 ， 其 他 990 位 客户 就 无 法 呼叫 了 。 这 就 是 数据 推送 模式 。 


但 这 并 不 总 是 坏事 ， 想 象 一 下 ， 如 果 那 个 用 户 一 下 午 每 隔 几 秒 钟 就 有 一 个 问题 。 这 种 情 
况 下 保持 电话 畅通 不 但 没有 浪费 10% 的 服务 资源 ， 反 而 会 增加 。 如 果 他 每 个 问题 都 要 重 
新 打 一 个 电话 (就 像 数 据 拉 取 )， 想 一 下 接线 员 花 在 接线 、 验 证 客户 身份 、 调 出 他 账户 的 
时 间 ， 其 至 还 有 在 通话 结束 时 礼貌 性 地 说 再 见 的 时 间 。 如 果 他 每 次 呼叫 都 是 由 不 同 的 接 
线 员 接 线 ， 他 们 还 要 花 点 时 间 聊 一 下 问题 背景 之 类 的 ， 这 也 会 降低 服务 效率 。 而 保持 电 
话 畅 通 不 仅 使 你 的 客户 更 满意 ， 也 会 提高 你 呼叫 中 心 的 工作 效率 。 这 是 数据 推送 模式 最 
适合 的 场景 。 























前 面 提 到 的 外 汇价 格 的 例子 就 很 适合 用 SSE 来 做 ， 有 大 量 的 价格 变化 ， 并 且 低 延迟 很 重 
要 : 用 户 只 能 以 当前 的 价格 交易 ， 而 不 是 60 秒 以 前 的 。 另 一 方面 ,考虑 一 下 大 范围 的 天 
气 预报 ， 气 象 局 会 每 半 小 时 发 布 一 次 最 新 的 天 气 预报 ， 但 多 数 时 候 天 气 不 是 从 “ 晴 ” 变 成 
别 的 ， 并 且 延 迟 也 不 是 很 重要 的 问题 。 如 果 天 气 预报 员 播报 的 天 气 预报 ， 不 是 从 “ 哺 ” 变 
成 “多 云 "， 那 这 则 天 气 预报 真 的 有 意义 吗 ?” 这 是 否 值得 保持 一 个 套 接 字 一 直 打 开 ， 或 者 
每 30 分 钟 或 60 分 钟 直接 从 气象 服务 器 拉 取 (数据 拉 取 ) 就 足够 了 ? 


那 有 什么 是 发 生 频 率 不 高 但 又 需要 关心 延迟 问题 的 事件 呢 ? 假如 政府 将 在 上 午 8:30 发 布 关 
于 经 济 增长 的 公告 ， 我 们 希望 在 发 布 时 立刻 将 公告 更 新 到 我 们 的 网 络 应 用 上 ， 要 怎么 做 ? 
这 种 情况 ， 最 好 是 设置 一 个 计时 器 ， 在 公告 即将 发 布 之 前 调用 一 个 Ajax 长 轮 询 ( 见 第 6 
章 ) 。 提 前 几 个 小 时 或 者 几 天 保持 一 个 套 接 字 一 直 打 开 是 一 种 浪费 。 


一 种 类 似 的 情况 是 可 预见 的 停工 时 刻 ， 回 到 接收 实时 外 汇价 格 的 例子 ， 没 有 必要 在 周末 还 
保持 连接 ， 应 该 在 周 五 下 午 5 点 (纽约 当地 时 间 ) 关闭 连接 ， 并 且 设置 一 个 定时 器 在 周 日 



































注 9: 多 少 限制 呢 ? 这 取决 于 服务 器 操作 系统 ， 可 能 是 每 个 耳 地 址 60 000 个 。 防 火 墙 或 负载 均衡 器 也 可 能 
会 做 一 些 限 制 。 服 务 器 的 内 存 也 是 个 关键 因素 。 这 个 问题 很 不 好 说 ， 所 以 我 的 建议 是 在 实际 使 用 的 操 
作 系 统 中 找 出 这 个 限制 。 
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下 午 5 点 重新 打开 。 如 果 服 务 器 是 建立 在 一 个 运行 即 收费 的 云 服 务 上 的 ， 那 这 意味 着 可 以 
在 周 五 晚上 关闭 一 些 服务 请 求 ， 这 可 以 节省 大 概 28% 的 开支 ! 参阅 5.4  。 


1.7 ， 决策、 决策 还 是 决策 
前 面 两 节 从 正 反 两 方面 探讨 了 数据 拉 取 、SSE 和 WebSocket， 但 怎么 知道 哪个 更 适用 ? 这 个 
问题 很 复杂 ， 它 是 以 应 用 的 表现 、 用 户 对 延迟 的 预期 相关 的 商业 决策 、 主 机 费用 方面 的 商 
业 决 策 以 及 用 户 和 你 的 开发 人 员 使 用 的 技术 为 基础 的 。 这 里 有 一 些 你 需要 自行 思考 的 问题 。 
。 服务 端 事件 发 生得 有 多 频繁 ? 
频率 越 高 越 适合 用 数据 推送 (不论 SSE 还 是 WebSocket) 。 
。 客户 端 事件 发 生得 有 多 频繁 ? 
如 果 事 件 触 发 的 频率 低 于 0.2 次 / 秒 ， 尤其 是 低 于 1 次 / 秒 ， 用 WebSocket 比 用 SSE 
好 。 如 果 频 率 低 于 0.1 次 / 秒 到 0.2 次 / 秒 左右 ， 那 用 哪个 都 可 以 。 























。 服务 端 事件 是 不 是 不 但 发 生 频 率 不 高 而 且 还 发 生 在 可 预见 的 时 刻 ? 
当 这 些 事件 的 触发 频率 低 于 1 次 /分 钟 ， 用 数据 拉 取 更 好 ， 因 为 它 不 需要 保持 一 个 套 接 
口 一 直 打 开 。 需 要 注意 大 量 客户 端 同时 试图 连接 服务 器 的 情况 。 


。 延迟 问题 有 多 关键 ? 给 个 量化 的 数据 。 
半 秒 延迟 是 否 会 让 用 户 烦躁 ? 60 秒 的 延迟 是 否 也 不 是 什么 问题 ? 
用 户 越 介意 延迟 ， 数 据 推送 比 数据 拉 取 就 越 有 优势 。 











。 是 否 需要 从 服务 端 向 客户 端 推送 二 进 制 数据 ? 
如 果 有 大 量 的 二 进 制 数据 ， 用 WebSocket 比 用 SSE 更 好 (在 这 方面 XHR 轮 询 也 比 SSE 
更 好 )。 
如 果 是 少量 的 二 进 制 数 据 ， 可 以 对 它 进行 编码 ， 然 后 用 SSE， 区 别 (相对 WebSocket) 
是 会 多 几 百 字 节 。 














。 是 否 需 要 从 客户 端 向 服务 端 推送 二 进 制 数据 ? 
用 XMLHttpRequest" (比如 Ajax， 这 是 SSE 从 客户 端 向 服务 端 发 送信 息 的 方式 ) 和 用 
WebSocket 处 理 二 进 制 数据 没什么 区 别 。 


。 大 部 分 的 用 户 是 用 有 线 连 接 还 是 移动 连接 ? 
使 用 LTE WiFi 路 由 器 或 者 被 限 速 的 笔记 本 用 户 ， 视 为 移动 连接 用 户 ; 通过 很 强 的 WiFi 
连接 到 光纤 上 游 连接 的 手机 用 户 ， 视 为 有 线 连 接 用 户 。 重 要 的 是 连接 ， 而 不 是 电脑 性 能 
或 屏幕 尺寸 。 





注 10: 严格 来 说 , XMLHttpRequest 的 第 2 版 , 参见 http://caniuse.com/xhr2, IE9 以 及 更 早 的 版 本 和 Android 2.x 
都 还 没 支 持 ， 但 那些 支持 WebSocket 和 SSE 的 浏览 器 也 没有 ， 所 以 也 不 影响 决策 。 
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要 知道 ， 移 动 连接 会 有 更 多 的 延迟 ， 尤 其 是 当 连 接 需 要 唤醒 的 时 候 。 这 使 得 在 移动 连接 
上 使 用 数据 拉 取 ( 轮 询 ) 方案 比 在 有 线 连接 上 要 糟糕 。 

同样 ， 一 个 超载 的 WiFi 连接 (比如 在 一 个 有 很 多 人 的 咖啡 馆 ) 会 丢失 越 来 越 多 的 数据 
包 ， 其 表现 更 像 一 个 移动 连接 ， 而 不 是 有 线 连接 。 


。 耗 电量 是 否 是 移动 用 户 关注 的 重点 ? 
需要 在 延迟 和 耗 电量 之 间 做 出 权衡 。 数 据 拉 取 (除非 你 知道 数据 什么 时 候 出 现 ， 从 而 预 
知 什么 时 候 开 始 轮 询 ) 通常 比 数据 推送 (SSE 或 WebSocket) 要 糟糕 。 


。 推送 的 数据 是 否 相对 来 说 比较 小 ? 

一 些 3G 移动 连接 有 一 个 专门 的 低 电 量 模式 ， 可 以 用 来 传输 小 数据 (200 bits 到 1000 bits ) 。 
但 那 不 是 重点 , 更 重要 的 是 一 个 大 的 消息 会 被 分 割 成 TCP/IP 片段 发 送 ， 有 一 个 片段 丢 
失 ， 就 要 重 发 。TCP 会 确保 按 发 送 数 据 的 顺序 接收 数据 ， 所 以 这 个 丢失 的 数据 包 会 阻 
碍 整个 数据 的 处 理 ， 同 时 也 会 阻塞 后 面 数 据 的 接收 。 所 以 ， 在 不 稳定 的 连接 中 (比如 ， 
移动 连接 ， 超 载 的 WiFi 连接 ) ， 发 送 的 数据 越 大 ， 需 要 发 送 的 额外 数据 包 就 越 多 。 

琅 虑 一 下 用 数据 推送 作为 控制 通道 ， 告 诉 浏览 器 直接 请 求 大 文件 ， 浏 览 器 很 有 可 能 用 自 
己 的 套 接 字 处 理 ， 因 此 不 会 阻塞 数据 推送 套 接口 (这 之 所 以 存在 ， 是 因为 你 认为 延迟 问 
题 很 重要 )。 






































。 数据 推送 是 Web 应 用 的 次 要 特性 还 是 主要 特性 ? 是 否 有 开发 者 资源 的 短缺 ? 
SSE 用 起 来 简单 ， 而 且 是 简洁 地 运行 在 现 有 的 基础 设施 上 ， 比 如 Apache。 这 就 节省 了 
测试 时 间 。 项 目 越 大 ， 你 拥有 的 开发 人 员 越 多 ， 这 个 问题 就 越 不 重要 。 





想 了 解 更 多 关于 前 面 儿 节 中 讨论 的 技术 细节 ， 尤 其 是 当 效率 和 处 理 高 负载 是 
尔 首要 关心 的 问题 ， 我 强烈 推荐 你 看 看 Hya Grigorik 写 的 《Web 性 能 权威 指 
南 》( 人 民 邮 电 出 版 社 )。 























下 HH 外 全 
1.8 ”市 我 看 代码 吧 
简 而 言 之 ， 如 果 想 要 网 站 更 迅速 地 刷新 数据 ， 并 且 你 现在 正 用 Ajax 轮 询 ， 或 者 页 面 重 载 ， 
或 正 考 虑 使 用 这 些 方案 , 或 者 想 用 WebSocket 又 觉得 它 水 平 太 低 了 ， 那 么 SSE 就 是 你 一 直 
在 找 的 技术 。 话 不 多 说 ， 赶 快 到 下 一 章 看 一 个 数据 推送 的 Hello World 吧 。 
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第 2 章 


玩 转 SSE 





本 章 介 绍 的 是 一 个 基于 SSE 的 从 服务 端 向 客户 端 实 时 推送 数据 的 简单 示例 ， 包 括 前 端 和 后 
端 。 本 章 不 会 涉及 SSE 的 一 些 不 常用 特性 (这 些 内 容 将 在 第 5 章 、 第 8 章 和 第 9 章 介绍 )， 
也 不 会 针对 不 支持 SSE 的 旧版 浏览 器 做 兼容 处 理 (参见 第 6 章 和 第 7 章 )。 但 即便 如 此 ， 
本 章 的 示例 也 能 在 大 部 分 主流 浏览 器 的 最 新 版 本 上 运行 。 








任何 最 新 版 的 Firefox、Chrome、Safari、iOS 版 Safari 或 Opera 都 没有 问 
题 ， 在 IE11 以 及 更 早 的 版 本 上 则 无 法 运行 ，Android 4.3 以 及 更 早 版 本 的 系 
统 默认 浏览 器 上 也 无 法 运行 。 要 在 Android 手机 或 平板 电脑 上 测试 本 章 示 
例 ， 请 安装 Android 版 Chrome 或 Firefox。 也 可 以 选择 长 轮 询 这 种 向 后 兼容 
方案 ， 第 6 章 将 介绍 这 种 方案 。 想 知道 哪些 浏览 器 原生 支持 SSE， 请 参见 
http://caniuse.com/eventsource。 





如 果 你 已 经 迫不及待 地 想 要 斌 一下， 就 把 basic_sse.html 和 basic_sse.php 放 到 Apache (或 者 
你 所 使 用 的 其 他 网 络 服务 器 软件 ) 的 同一 目录 下 ， 服 务 器 可 以 是 本 地 的 ， 也 可 以 是 远程 的 。 
如 果 文 件 放 在 本 地 服务 器 一 个 叫 SSE 的 目录 下 ， 那 么 打开 http://localhost/sse/basic_sse.html 会 
看 到 页 面 上 每 秒 出 现 一 个 时 间 惟 ， 并 且 很 快 就 会 填 满 整个 页 面 。 


2.1 最 简单 的 示例 : 前 端 


我 会 慢 慢 讲 这 个 例子 ,说 不 定 你 需要 复习 一 些 HTML5 或 JavaScript 方面 的 知识 。 首 先 ， 












































注 1: 此 时 此 刻 ， 务 必 将 你 的 HTML 和 服务 端 脚本 放 在 同一 个 服务 器 中 ， 第 9 章 会 介绍 跨 域 解决 方案 ， 使 
前 端 页 面 (在 某 些 浏览 器 上 ) 可 以 访问 不 同 服务 器 上 的 脚本 。 











我 们 来 创建 一 个 最 简单 的 HTML 文件 ， 用 HITML/head/body 标签 搭 个 架子 。 第 一 行 是 
HTMLS5 的 文档 类 型 声明 ， 它 比 你 在 HTML 4 中 可 能 看 到 的 文档 类 型 声明 要 简单 很 多 。 在 
<head> 标签 中 指定 编码 格式 为 UTF-8， 但 这 不 是 因为 示例 中 用 了 什么 外 星 字 符 ， 而 是 因为 
如 果 不 指定 ， 一 些 校 验 工具 会 抱怨 。 




















<!doctype htmL> 
<htmL> 
<head> 
<meta charset="UTF-8"> 


<title>Basic SSE Example</title> 
</head> 
<body> 
<pre id="x">Initializing...</pre> 
</body> 
</html> 


这 里 用 了 一 个 <pre> 标签 ，id 是 "x"。 之 所 以 用 <pre> 而 不 是 <p> 或 者 <div>， 是 为 了 确保 
(包含 换行 的 ) 数据 能 以 它 被 接收 时 的 格式 呈现 ， 而 不 会 被 修改 或 格式 化 。 


使 用 服务 端 数 据 之 前 最 好 做 一 下 检查 ， 以 防 注 在 的 JavaScript 注入 攻击 。 








初始 状态 下 ，<pre> 块 内 写 死 了 内 容 “Initializing…” ， 我 们 会 用 数据 替换 那 段 文本 。 





jQuery 和 JavaScript 


如 果 你 一 直 在 用 jQuery， 用 $C("#x") 获 取 HTML 中 x 的 对 象 引 用 的 等 效 方法 是 
document .getELement-ById("x")。 要 替换 这 段 文 本 ， 我 们 将 其 赋值 给 innerHTML。 要 在 
现 有 文本 上 追加 ， 要 用 += 而 不 是 =， 如 下 所 示 ;: 


1/ 与 $C("#x").html("New content\n"); 等 效 的 原生 JavaScript 代码 
document.getElementById("x"). innerHTML = "New content\n" 
1/ 与 $C("#x").append("Append me\n"); 等 效 的 原生 JavaScript 代码 
document .getELementById("x") .innerHTML += "Append me\n" 











接 下 来 在 HIML 主体 底部 添加 一 个 <script> 块 : 


<!doctype html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Basic SSE Example</title> 
</head> 
<body> 


<pre id="x">Initializing...</pre> 
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<script> 
var es=new EventSource("basic_ sse.php"); 
</script> 
</body> 
</html> 


我 们 创建 了 一 个 EventSource 对 象 ， 将 要 连接 的 URL 作为 它 唯一 的 参数 ， 这 里 要 连接 到 
basic_sse.php。 恭 喜 ， 我 们 现在 已 经 有 了 一 个 可 以 运行 的 SSE 脚本 。 仅 此 一 和 
接 到 后 端 服务 器 ， 然 后 浏览 器 就 能 接收 到 连续 的 数据 流 了 。 但 如 果 你 运行 这 个 示例 ， 会 

得 它 的 确 没 什么 价值 ， 就 算 你 真 这 么 想 ， 我 也 不 怪 你 。 


要 看 到 SSE 发 送 的 数据 ， 需 要 处 理 “ 人 信息” 事件。SSE 是 异步 的 ， 这 意味 着 程序 不 需要 
停 在 那儿 等 着 服务 器 返回 ， 也 不 需要 通过 轮 询 去 看 是 否 有 新 数据 。JavaScript 一 如 既往 地 
存在 着 ， 与 用 户 交 互 ， 做 出 笨拙 的 动画 ， es 全 政府 机 关 ， 以 及 任何 JavaScript 可 以 
做 的 事 。 当 服务 器 有 话 要 说 时 ， 就 会 调用 一 个 指定 的 函数 ， 这 个 函数 被 称 为 “事件 处 理 程 
序 "， 可 能 你 也 听 过 “回调 函数 ”这 个 称呼 。 ee 对 象 触发 事件 ， 并 且 每 个 对 
象 都 有 一 组 可 以 被 侦 听 的 事件 。 要 绑 定 一 个 事件 处 理 程序 ， 可 以 写 一 段 这 样 的 代码 : 


























es.addEventListener('message', FUNCTION, false); 


以 es. 开头 表示 要 侦 听 刚刚 创建 的 EventSource 对 象 的 事件 。 第 一 个 参数 是 事件 名 称 ， 这 里 
是 ' message'; 第 二 个 参数 是 处 理 这 个 事件 的 函数 ”。 


用 来 处 理事 件 的 FUNCTION 函数 附带 一 个 参数 ， 是 要 处 理 的 事件 ， 通 常用 e 表示 。e 是 一 个 
对 象 ， 而 我 们 关心 的 是 e.data， 它 包含 了 服务 端 发 送 给 我 们 的 新 消息 。 可 以 单独 定义 这 个 
回调 函数 ， 然 后 把 函数 名 作为 第 二 个 参数 赋 给 addEventListener， 但 更 常用 的 是 一 个 匿名 
函数 ， 省 得 那 一 行 函 数 午 乱 我 们 的 代码 (还 要 想 一 个 合适 的 函数 名 )。 把 这 些 一 起 放 到 示 
例 代码 中 ， 如 下 所 示 : 






























































<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Basic SSE Example</title> 
</head> 
<body> 
<pre id="x">Initializing...</pre> 
<script> 
var es = new EventSource("basic_sse.php"); 
es.addEventListener("message", function(e){ 
// 在 这 里 使 用 e.data 
},false); 
</script> 
</body> 
</html> 











注 2: 第 三 个 参数 false 表示 在 冒 泡 阶 段 处 理事 件 ， 而 不 是 捕获 阶段 ， 管 它 呢 ， 用 false 就 是 了 。 
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它 还 是 什么 都 没 做 ! 所 以 在 回调 函数 的 函数 体 中 ， I 它 把 e.data 插入 到 <pre> 标签 中 
(每 条 消息 前 面 加 了 一 个 换行 符 以 便 每 条 信息 自 成 一 行 )。 最 终 代 码 如 下 所 示 : 














<!doctype htmL> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Basic SSE Example</title> 
</head> 
<body> 
<pre id="x">Initializing...</pre> 
<script> 
var es = New EventSourcel bastc sse.php’ )s 
es.addEventListener("message", function(e){ 
document .getELementById("x" ) .innerHTML += "\n" + e.data; 
},false); 
</script> 
</body> 
</htmL> 


终于 ， 我 们 看 到 有 一 行 显示 “Initializing..”， 然 后 每 秒 都 出 现 一 个 新 的 时 间 惟 (如 图 2-1 
所 示 )。 





初始 化 中 ... 

2014-01-08 15:35:51 
2014-01-08 15:35:52 
2014-01-08 15:35:53 
2014-01-08 15:35:54 
2014-01-08 15:35:55 











图 2-1: basic_sse.html 运行 几 秒 后 的 效果 








可 以 为 其 他 EventSource 
介绍 。 


2.2 ”使 用 jQuery 吗 


现在 很 多 人 用 jQuery。 但 前 面 提 到 的 SSE 样 例 代码 太 简 单 了 ， 用 jQuery 也 简化 不 了 多 少 。 


Wh 





事件 写 回 调 函 数 ， 但 这 都 不 是 必需 的 ， 在 后 面 第 一 次 用 到 时 会 作 









































下 面 是 用 jQuery 重 写 的 极 简 示例 代码 ， 供 参考 : 
<!doctype htmL> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Basic SSE Example</title> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
</head> 
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<body> 
<pre id="x">Initializing...</pre> 
<script> 
var es = new EventSource("basic_ sse.php'"); 
es.addEventListener("message", function(e){ 
$("#x").append("\n" + e.data); 
},false); 
</script> 
</body> 
</html> 











下 面 这 个 版 本 (本 书 源 代码 里 的 basic_sse_jquery_anim.html) 在 每 次 更 新 时 用 了 谈 入 淡出 








动画 ,使 它 看 上 去 更 漂亮 ， 此 外 还 用 替换 取代 了 追加 ， 所 以 只 会 显示 


<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Basic SSE Example</title> 


示 最 新 的 时 间 惟 。 


<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 


</head> 
<body> 
<pre id="x">Initializing...</pre> 
<script> 
var es = new EventSource("basic_ sse.php'"); 
es.addEventListener("message", function (e) { 
$s("#x").fadeOut("fast", function () { 
$("#x").html(e.data); 
$("#x").fadeIn("slow"); 
}); 
}, false); 
</script> 
</body> 
</html> 


2.3 a 
我 们 学 习 的 第 一 个 后 端 (服务 端 ) 示例 是 用 PHP 写 的， 如 下 所 示 


<?php 
header("Content-Type: text/event-stream"); 
while (true) { 
echo "data:" .date("Y-m-d H:i:s")."\n\n"; 
@ob_flush(); @flush(); 
sleep(1); 
} 





这 段 代码 就 像 前 端 代码 一 样 ， 超 短 ， 对 吧 ? 没有 库 ， 没 有 依赖 ， 只 是 几 行 简单 的 普通 PHP 


代码 。 就 像 前 端 一 样 ， 这 里 还 可 以 做 更 多 事情 ， 但 也 都 不 是 必需 的 。 


代码 第 一 行 <?php 表明 这 是 一 个 PHP 脚本 ， 然 后 用 header() 函数 返 


回 一 个 MIME 类 型 的 
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text/event-stream，text/event-stream 是 专门 为 SSE 设计 的 MIME 类 型 。 接 下 来 是 一 个 
无 限 循 环 (while(true){...} 是 PHP 的 惯用 做 法 ) ， 在 这 个 循环 中 ， 每 秒 输出 当前 时 间 导 。 


SSE 协议 要 求 消息 数据 (时 间 惟 ) 加 上 data: 前 级 ， 并 在 后 面 加 了 一 个 空 行 。 所 以 假设 是 
从 2014 年 2 月 28 日 下 午 1 点 开始 ， 输 出 的 时 间 惟 如 下 所 示 >: 





data:2014-02-28 13:00:00 
data:2014-02-28 13:00:01 
data:2014-02-28 13:00:02 


data:2014-02-28 13:00:03 


@ob_flush;@flush(); 这 一 行 是 做 什么 用 的 呢 ? 它 告诉 PHP (以 及 Apache) 立即 将 数据 返回 
给 客户 端 ， 而 不 是 缓冲 起 来 成 批发 送 。@ 前 组 的 意思 是 忽略 错误 ， 用 在 这 里 很 恰当 : 如 果 
没有 数据 可 以 冲 掉 ，ob_flush() 会 报错 ， 但 这 并 不 是 我 们 需要 关心 的 。( 你 可 能 想 问 ，ob_ 
flush() 是 否 必须 放 在 flush() 前 面 ? 是 的 ， 必 须 ! ) 











PHP 错误 控制 
对 于 PHP 专家 来 说 ，@ 会 很 慢 ， 但 在 如 上 文 所 述 的 场景 中 ,调用 2 次 运行 时 间 大 概 
多 了 0.01 上 毫秒， 如 下 所 示 。 所 以 ， 只 要 不 是 把 它 放 在 一 个 紧凑 的 循环 里 ， 大 可 以 放 
' 心 。@foo() 是 一 种 简写 ， 调 用 foo() 之 前 ， 它 是 Sprev=error_reporting(0); 的 简写 ， 
调用 foo() 之 后 ， 它 是 error_reporting($prev) 的 简写 。 所 以 ， 如 果 你 确实 很 在 意 性 
能 ， 又 需要 在 循环 里 使 用 Qfoo()， 也 殴 悉 这 个 语 和牛 的 含义 ， 那 最 好 还 是 把 那些 语句 
($prev=error_reporting(0);error_reporting($prev)) 放 在 循环 外 面 。 


ob_fLush 用 来 阻止 程序 报 E NOTICE， 所 以 更 好 的 完整 写法 是 这 样 的 : 


$prev = error_reporting(); 
error_reporting($prev & ~E_NOTICE); 


ob_flush(); 
flush(); 


error_reporting($prev); 


http://bit.ly/1gCNyfX 表明 flush() 永远 不 会 报错 ， 所 以 它 前 面 的 @ 可 以 删 掉 ， 只 需 保 
留 ob_flush() 前 面 的 部 分 。http://bit.ly/1lelPD1S 列 出 了 ob_fLush 可 能 会 抛 出 的 警告 。 











无 限 循环 让 你 感到 紧张 了 吗 ? 这 里 还 好 啦 。 一 个 SSE 连接 占用 一 个 Apache 的 线程 /进程 ， 








注 3: 如 果 输 出 结果 没有 空 行 ， 尝 试 将 代码 中 的 "\n\n" 替换 成 PHP_EOL.PHP_EOL。 一 一 译 者 注 
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但 只 要 浏览 器 关闭 连接 (不 论 是 通过 JavaScript， 还 是 用 户 关闭 浏览 器 窗口 )， 这 个 套 接 字 
就 会 关闭 ， 然 后 Apache 会 关闭 这 个 PHP 实例 。 

















你 是 否 会 担心 缓存 问题 ?不 论 是 客户 端的 还 是 中 间 代 理 服务 端的 。 的 确 ， 缓 存 对 SSE 来 
说 是 非常 糟糕 的 ， 因 为 让 用 户 及 时 获取 最 新 信息 才 是 我 们 的 重点 。 在 我 的 测试 中 ， 客 户 端 
从 没有 做 任何 组 在。 因为 这 是 个 极 简 的 例子 ， 所 以 我 有 意 忽略 了 缓存 问题 。 为 确保 万 无 一 
失 ， 其 他 章节 的 例子 里 会 明确 指明 禁用 缓存 (参见 5.10 市 )。 











在 使 用 SSE 时 还 需要 注意 一 件 事 ， 即 浏览 器 会 终止 一 个 失 活 的 连接 。 比 如 ， 
有 些 版 本 的 Chrome 浏览 器 会 在 连接 失 活 60 秒 后 关闭 连接 (然后 重新 打开 )。 
在 我 们 的 真实 应 用 中 ， 我 们 会 处 理 这 个 问题 (参见 5.3 节 )。 不 过 现在 还 不 需 
要 ， 因 为 服务 端 绝 不 会 失 活 : 我 们 每 秒 都 会 输出 数据 。 























2.4 基于 Node.js 的 后 端 


在 这 一 市 中 ， 我 们 会 在 后 端 使 用 Nodejs。 它 和 你 所 知道 的 浏览 器 中 的 JavaScript 是 一 样 
的 ， 甚 至 连 一 些 库 也 是 一 样 的 〈 字 符 串 、 正 则 表达 式 、 日 期 等 )， 但 它 是 用 在 服务 端的 ， 
还 扩展 了 模块 加 载 。 用 Nodejjs 时 最 需要 注意 的 是 ， 在 默认 情况 下 ， 一 切 都 是 无 阻塞 的 ， 
换 名 话说， 就 是 异步 的 : 异步 编程 需要 用 不 同 的 思路 。 但 正 是 这 种 无 阻塞 、 事 件 驱 动 的 特 
点 使 它 非常 适合 用 来 做 数据 推送 应 用 。 


在 前 面 使 用 的 PHP 服务 器 解决 方案 ， 其 更 好 的 叫 法 是 “Apache+PHP”， 因 为 是 用 Apache 
(或 者 其 他 服务 器 软件 ) 处 理 HTTP 请 求 事务 (以 及 一 堆 其 他 事务 ， 比 如 授权 )， 然 后 只 是 
用 PHP 处 理 请 求 本 身 的 逻辑 。 且 不 说 这 让 我 们 的 示例 代码 相当 小 ， 这 也 是 PHP 的 最 常见 
用 法 。Node.js 自 带 网 络 服务 库 ， 这 是 很 多 人 用 它 做 网 络 内 容 服务 的 方式 ， 也 是 这 里 将 要 用 
到 的 方式 。 





























不 要 陷入 无 休止 的 语言 战争 。 任 何 语 言 ， 在 你 熟悉 它 之 前 ， 都 会 让 你 觉得 
不 舒服 。 一 旦 习惯 了 ， 即 便 有 不 舒服 的 地 方 ， 你 也 知道 怎么 处 理 。PHP 和 
Nodejs 真正 强大 的 地 方 很 类 似 : 非常 流行 ， 相 关 开发 人 员 很 好 找 ， 并 且 有 
很 多 实用 的 扩展 。 











2.4.1 基于 Node.js 的 最 简 Web 服 务 器 
在 介绍 如 何 用 Node.js 支持 SSE 之 前 ， 先 看 一 下 基于 Node.js 的 最 简 Web 服务 器 代码 : 





var http = require("http"); 


http.createServer(function(request,response) { 
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response.writeHead(200, 
{ "Content-Type": "text/plain" } 
); 
var content = "Hello World\n"; 
response.end(content); 
}).listen(1234); 


是 Common]JS 中 引入 模块 的 方式 。 然 后 可 以 仅 用 一 行 代码 启动 一 





第 一 行 引入 了 http 库 
个 HTTP 服务 器 


http.createServer(myRequestHandler).listen(port); 























一 行 代 码 很 强 它 将 开始 监听 指定 的 端口 号 ， 处 理 所 有 的 HTTP 协议 ， 处 理 多 个 客户 
， 并 且 当 客户 端 连接 时 会 调用 专门 的 请 求 回调 函数 。 在 默认 情况 下 ， 它 会 监听 所 有 的 本 
meio 如 果 想 让 它 监 听 127.0.0.1， 具 体 指 定 如 下 : 





http.createServer(myRequestHandler).listen(port,"127.0.0.1"); 


按照 惯例 ， 请 求 回调 函数 以 匿名 函数 实现 ， 我 们 的 示例 遵循 这 一 惯例 。 这 个 函数 有 两 个 参 
数 : 一 个 是 http.ClientRequest* 对 象 的 实例 request， 另 一 个 是 http.ServerResponses 对 


象 的 实例 response。 





request 参数 告诉 服务 端 客 户 端 在 请 求 什么 ，response 对 象 返回 客户 端 请 求 的 内 容 。 这 
个 最 简 示 例 中 完全 忽略 了 用 户 请 求 : 任何 请 求 获得 的 东西 〈content 字符 串 ) 都 是 一 样 
的 。 这 里 两 次 调用 了 response 对 象 ， 其 中 第 一 次 是 指定 状态 (HTTP 状态 码 200 的 意思 是 
“成 功 ”) 和 请 求 头 的 内 容 类 型 (这 里 是 纯 文 本 ， 不 是 HTML)， 第 二 次 调用 是 response. 

end(content)， 这 其 实 是 两 次 调用 的 一 种 简写 : 发 送 数据 给 客户 端 (可 以 选择 指定 编码 ) 
的 response.write(content) 和 表示 全 部 发 送 完成 的 response.end() 。 








要 测试 这 段 代 码 ， 需 把 它 保存 为 basic_sse_node_serverl.js， 在 命令 行 中 运行 node basic_sse_ 
node_server1.js， 然 后 在 浏览 器 中 访问 http:/127.0.0.1:1234， 你 就 能 看 到 “Hello World 。 








2.4.2 ”用 Node.js 做 推送 


上 一 市 我 们 忽略 了 用 户 输入 ， 并 输出 静态 纯 文本 内 容 。 在 接 下 来 的 代码 块 里 我 们 继续 忽略 
用 户 输入 ， 但 是 会 输出 动态 文本 一 一 当前 时 间 惟 ， 就 像 之 前 PHP 代码 所 做 的 : 





var http = require("http"); 


http.createServer(function(request,response) { 
response.writeHead(200, { "Content-Type": "text/event-stream" }); 
setInterval(function () { 





参见 http://nodejs.org/api/http.html#http_class_http_clientrequest。 
注 5: ;这 见 http://nodejs.org/api/http.html#http_class_http_serverresponse。 
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var content = "data:" + 
new Date().toISOString() + "\n\n"; 
response.write(content); 
}, 1000); 
}).listen(1234); 


一 个 变化 是 输出 text/event-strean 内 容 类 型 ， 这 不 是 重点 。 但 与 前 述 示例 相 比 最 大 的 


变化 是 加 入 了 setIntervaL(...，1969)， 用 来 每 秒 运 行 一 段 代 码 。 在 PHP 中 ， 我 们 用 一 个 
无 限 循 环 和 一 个 sleep() 语句 达到 同样 的 目的 。 如 果 在 Node.js 中 也 这 样 做 会 阻塞 整个 网 络 
服务 器 ， 其 他 客户 端 就 不 能 连接 了 。 写 一 个 Node.js HTTP 服务 器 时 ， 尽 可 能 快 地 退出 请 
求 回 调 函 数 很 重要 ， 所 以 Node.js 的 方式 是 用 setIntervaL。 每 秒 被 调用 1 次 的 那 段 代码 相 


a 














简单 。data: 前 级 和 \n\n 后 级 是 SSE 协议 规范 所 要 求 的 ，new Date().toISOString() 是 


JavaScript 中 获取 当前 时 间 惟 的 常用 方式 。 








在 命令 行 工 具 中 ， 输 入 命令 node basic_sse_node_server2.js 来 启动 服务 。 现 在 不 要 尝试 
在 浏览 器 上 测试 〈 它 不 会 运行 的 )。 如 果 安 装 了 curl， 可 以 通过 在 命令 行 工 具 中 输入 curl 


http:/127.0.0.1:1234/ 来 测试 。 每 秒 会 出 现 一 个 新 的 时 间 惟 ， 每 条 数据 之 间 有 一 个 空 行 ， 数 
据 如 下 : 





data:2014-02-28T13:00:00.1232 


data:2014-02-28T13:00:01.145Z 


data:2014-02-28T13:00:02.1402 


data:2014-02-28T13:00:03.1422 








一 些 改进 


有 很 多 方法 可 以 用 来 改进 这 段 脚 本 ， 虽 然 这 与 本 章 的 最 简 主 题 相 悖 。 在 代码 最 上 面 添 
加 这 一 行 代码 : 


var port = parseInt( process.argv[2] || 1234 ); 


然后 修改 一 下 脚本 的 最 后 一 行 ， 修 改 后 的 代码 如 下 所 示 : 


ytstentport 
这 样 就 可 以 在 命令 行 中 指定 要 监听 的 端口 号 。 如 果 服 务 端 还 没有 任何 正在 运行 的 网 络 
服务 器 ， 可 以 指定 80 端口 来 把 这 段 脚 本 当做 root 来 运行 。 
下 一 个 变化 是 添加 一 些 调试 信息 以 便 观 察 它 是 如 何 运作 的 ， 用 下 面 三 行 代码 替换 


response.write(content);: 
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var b = response.write(content); 
if(!b)consoLe.Log("Data queued (content=" + content + ")"); 
else console.log("Flushed! (content=" + content + ")"); 


就 像 在 浏览 器 中 ，JavaScript console.log() 可 以 让 程序 员 观 察 程序 的 动静 。 如 果 数 据 
被 彻底 擦 除 ，response.write() 会 返回 true。 大 多 数 时 候 都 是 这 样 ， 这 是 好 事 。 如 果 
数据 被 缓存 到 内 存 ，response.write() 会 返回 false。 这 意味 着 在 response.write() 
返回 时 ， 数 据 还 没有 发 送 到 客户 广 。 如 果 发 送 数 据 的 频率 太 快 (这 很 难看 出 来 。 即 便 
把 时 间 间 隔 从 1000 毫秒 改 为 1 毫秒 也 不 会 被 视 为 “ 太 快 "， 但 把 setInterval 去 掉 ， 
用 while(true){...} 循环 就 可 以 )， 或 者 套 接 字 损 坏 了 ， 就 会 发 生 这 种 情况 。 


重新 启动 node 服务 器 ， 然 后 重新 启动 curl 客户 端 ， 等 到 出 现 一 些 数据 的 时 候 按 下 
Ctrl-C 来 关闭 curl 客户 端 ， 去 node 窗口 看 一 下 它 怎么 继续 发 送 数 据 ， 啊 ， 噢 .…… 这 正 
是 用 Apache+PHP 时 ，Apache 处 理 的 一 些 其 他 事情 。 


我 们 要 做 的 是 让 服务 问 感 知 到 服务 端 断 开 连 接 ， 这 能 通过 侦 听 close 事件 实现 。 
close 事件 是 request.connection 的 一 部 分 ， 所 以 可 以 通过 添加 下 面 这 段 代 码 来 响应 
这 个 事件 : 
request.connection.on("close", function(){ 
response.end(); 


clearInterval(timer); 
console.log("Client closed connection. Aborting."); 


}); 


这 段 代码 需要 放 在 setInterval 调用 之 后 。 在 那 之 前 ， 像 下 面 这 样 获取 setInterval 
的 返回 值 : 


var timer = setInterval(function(){ 


现在 ， 回 调 济 数 会 在 客户 端 断 开 连 接 时 触发 ， 然 后 把 response 彻底 关闭 ， 同 时 也 关闭 
那个 每 秒 钟 踢 跌 一 次 的 计时 器 。 
如 果 你 看 了 本 书 源码 中 的 basic_sse_node_server3.js， 会 发 现 许多 额外 的 console.log() 


语句。 











2.4.3 在 浏览 器 中 运行 
首先 ， 启 动 node 服务 器 (node basic_sse_node_server3.js)， 找 到 本 章 前 面 提 到 的 basic_sse. 
html， 用 编辑 器 打开 它 ， 然 后 找到 这 一 行 : 





var es = new EventSource("basic_ sse.php"); 
把 它 改 成 使 用 监听 1234 端口 的 Node.js 服务 器 : 


var es = new EventSource("http://127.0.0.1:1234/"); 
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现在 在 浏览 器 中 打开 basic_sse.html (前 提 是 已 经 在 80 端口 上 运行 Apache， 至 少 能 运 和 
HTML 文件 )。 























什么 都 没 发 生 ， 你 会 看 到 “Preparing...”， 然 后 就 没有 下 文 了 。 为 什么 ?因为 HTML 文件 
是 从 80 端口 加 载 的 ， 却 试图 连接 到 1234 端口 。 不 同 的 端口 号 足以 被 视 为 不 同 的 服务 器 ， 
向 一 个 不 同 的 服务 器 建立 连接 是 不 允许 的 (因为 安全 原因 )。 第 9 章 会 介绍 跨 域 资源 共享 
(CORS)， 它 给 服务 器 提供 了 一 种 方式 ， 来 表示 它们 想 要 接受 从 其 他 服务 器 加 载 内 容 的 客户 
端 连接 。 替 代 方 案 是 用 Node.js 向 客户 端 传送 HTML 文件 ， 这 是 Nodejjs 的 一 般 做 事 方式 。 









































wm 


在 继续 之 前 ， 把 basic_sse.html 里 的 SSE 连接 改 回 basic_sse.php。) 然后 ， 脚 本 能 读 取 本 地 
文件 系统 中 的 文件 ， 把 下 面 这 行 代码 加 到 脚本 的 最 上 面 : 





























var fs = require("fs"); 


那么 ， 最 大 的 变化 发 生 在 请 求 回调 函数 的 最 上 方 。 在 最 上 面 加 上 下 面 这 段 代码 : 











if (request.url != "/basic sse.php") { 
fs.readFile("basic sse.html", 
function (err, file) { 
response.writeHead(200, 
{"Content-Type": "text/html"} 
); 
response.end(file); 


}); 


return; 


} 


当 得 到 一 个 具体 的 URL 时 ， 把 它 当 成 对 流 式 传输 的 请 求 ， 接 下 来 (注意 !=) 把 这 个 
HTML 文件 返回 。readFile() 是 Nodejjs 的 一 种 异步 操作 。 传 和 一 个 文件 名 ， 然 后 当 文件 
加 载 完 成 时 ， 由 一 个 异步 函数 处 理 它 的 内 容 。 在 等 待 文件 加 载 完 成 的 同时 ， 请 求 回 调 函 数 
返回 。 当 文件 加 载 完成 时 ， 只 是 简单 地 把 它 以 text/html 的 内 容 类 型 返回 给 客户 端 ， 然 后 用 
end() 关闭 连接 。 











现在 可 以 在 浏览 器 中 访问 http://127.0.0.1:1234 了 。 





修改 HTML 文件 


什么 情况 ? 为 什么 在 前 面 的 代码 片段 中 提 到 了 PHP ? 你 已 经 陷入 和 PHP 阵营 的 语言 
战争 中 ， 陷 得 太 深 以 至 于 要 在 他 们 的 茶 里 下 毒 ， 向 老板 抱怨 他 们 的 个 人 卫生 问题 ， 并 
且 通 过 邮件 给 他 们 发 去 超过 35 篇 文章 的 链接 ， 让 他 们 看 看 异步 编程 多 么 重要 、 多 人 么 
简单 。 现 在 看 起 来 你 在 用 Node.js 处 理 PHP 内 容 。 原 因 很 简单 : basic_sse.html 原本 是 
为 了 连接 到 PHP 脚本 而 写 的 ， 我 不 想 再 多 写 一 个 文件 。 


好 吧 ， 这 很 好 解决 。 在 从 磁盘 加 载 文 件 之 后 ， 发 送 给 客户 端 之 前 ， 为 什么 不 修改 一 下 
要 连接 的 URL ? 按 下 面 粗 体 部 分 修改 : 
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if (request.url != "/sse") { 
fs.readFile("basic sse.html", 
function (err, file) { 
response.writeHead(200, 
{"Content-Type": "text/html"} 
); 
var s = file.toString(); 
s = s.replace("basic sse.php", "sse"); 
response.end(s); 
下) 
return; 


} 


顺便 说 一 下 ，file 实际 上 是 一 个 buffer， 而 不 是 一 个 字符 囊 (因为 它 可 能 包含 二 进 制 
数据 )， 这 也 是 首先 要 把 它 转 化 成 字符 囊 的 原因 。 











在 本 书 源 代 码 的 basic_sse_node_server.js 文件 中 能 找到 本 节 用 到 的 代码 ， 以 及 上 面 两 个 附 
加 内 容 中 的 代码 。 下 面 是 它 的 全 部 代码 : 





var http = require("http"), fs = require("fs"); 
var port = parseInt(process.argv[2] || 1234); 


http.createServer(function (request, response) { 
console.log("Client connected:" + request.url); 
if (request.url != "/sse") { 
fs.readFile("basic sse.html", function (err, file) { 

response.writeHead(200, {'Content-Type': 'text/html' }); 
var s = file.toString(); //file 是 buffer 
s = s.replace("basic sse.php", "sse'"); 
response.end(s); 
]); 


return; 


} 
// 下 面 是 处 理 SSE 请 求 ， 它 永 不 返回 。 
response.writeHead(200, { "Content-Type": "text/event-stream" }); 
var timer = setInterval(function () { 
var content = "data:" + new Date().toISOString() + "\n\n"; 
var b = response.write(content); 
if (!b)console.log("Data got queued in memory (content=" + content + ")"); 
else console.log("Flushed! (content=" + content + ")"); 
}, 1000); 
request.connection.on("close", function () { 
response.end(); 
clearInterval(timer); 
console.log("Client closed connection. Aborting."); 
}); 
}).listen(port); 
console.log("Server running at http://LocaLhost: 





+ port); 











它 比 basic_sse.php 的 代码 要 多 很 多 ， 因 为 需要 处 理 在 Apache+PHP 解决 方案 中 Apache 已 
经 处 理 的 事务 。 

















2.5 华丽 退场 


这 就 是 SSE 的 Hello World 示例 。 前 端 和 后 端 都 只 需 几 行 代码 ， 不 能 再 简单 了 ， 对 吧 ? 在 
接 下 来 的 5 章 里 ， 我 们 会 在 这 些 知识 的 基础 上 ， 使 它 更 复杂 、 更 健壮 ， 以 便 适 用 于 几乎 所 
有 的 桌面 和 移动 浏览 器 
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第 3 章 


迷人 的 真实 数据 推送 应 用 





本 章 会 在 上 一 章 所 创建 代码 的 基础 上 实现 一 个 真实 的 〈 侈 方位 地 模拟 真实 场景 ) 数据 推送 
应 用 (可 以 在 3.1 节 中 看 到 所 选 的 问题 领域 )。 本 章 和 接 下 来 两 章 的 代码 仍然 只 能 在 支持 SSE 
的 浏览 器 上 运行 。 第 6 章 和 第 7 章 会 介绍 如 何 修改 前 端 和 后 端 代 码 来 兼容 旧版 浏览 器 。 





为 这 一 章 只 是 关于 SSE 的 ， 如 果 要 在 Android 设备 上 测试 ， 请 安装 
Android 版 的 Chrome 或 Firefox。 如 果 在 Windows 系统 上 测试 ， 请 安装 
Firefox、Chrome、Safari 或 者 Opera。 好 吧 ， 你 肯定 至 少 已 经 安装 了 其 中 的 
一 个 ， 你 说 过 你 是 一 个 专业 开发 人 员 ! 








本 章 会 包含 一 些 可 能 和 应 用 本 身 关 系 不 大 的 PHP 后 端 代码 ， 建 议 你 至 少 浏览 一 下 这 些 代 
码 ， 因 为 后 面 儿童 以 它 为 基础 ， 而 且 它 一 步 一 步 地 展示 了 一 种 对 数据 推送 系统 进行 单元 测 
试 和 功能 测试 的 方法 。 


3.1 问题 领域 


本 章 和 接 下 来 的 儿童 涉及 金融 行业 的 问题 领域 。 像 软件 行业 一 样 ， 它 也 有 一 些 生 涩 的 行业 
术语 ， 所 以 我 会 介绍 一 些 你 可 能 会 遇 到 的 术语 ， 以 及 足够 的 背景 信息 ， 以 帮助 你 理解 应 用 
的 一 些 设 计策 略 。 





这 个 应 用 的 功能 就 是 把 银行 或 经 纪 商 的 外 汇 买 入 价 / 卖 出 价 公 布 给 交易 商 。 第 一 个 术语 就 
是 外 汇 ， 说 白 了 就 是 货币 的 买卖 。 它 是 一 个 全 球 范围 的 分 散 市 场 : 听 ， 又 一 个 术语 。 分 散 
市 场 意 味 着 货币 的 交易 场所 不 是 唯一 的 ， 不 像 股票 交易 ， 只 能 在 一 个 地 方 买卖 一 家 公司 的 
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股票 (这 不 是 很 确切 ， 一 些 大 公司 会 将 他 们 的 股票 放 到 二 到 三 个 证 券 交 易 所 )。 


王 
外 汇 经 纪 商 是 做 生意 的 ， 不 会 像 交 易 商 那样 通过 观察 货币 波动 的 方式 赚钱 ， 他 们 通过 价差 
(有 时 是 佣金 ) 赚钱 。 价 差 是 买 人 价 和 卖 出 价 之 间 的 差额 ， 买 入 价 是 这 两 个 价格 中 较 低 的 那 
个 ， 它 是 经 纪 商 为 买 货币 愿意 出 的 价钱 ， 也 是 你 卖 掉 手 里 的 货币 (如 果 你 有 的 话 ) 能 得 到 的 
钱 ; 卖 出 价 稍微 高 一 些 , 是 经 纪 商 愿意 出 售 货 币 的 价钱 , 也 是 你 想 买 进货 币 所 需要 支付 的 钱 。 
外 汇市 场 是 一 个 全 球 市 场 。 纽 约 股 票 市 场 只 会 在 纽约 时 区 的 工作 时 间 营 业 ， 但 世界 各 地 的 


人 们 一 天 到 晚 都 想 买 卖 货 币 。 它 是 一 个 24/5“ 市场。 按照 惯例 ， 它 在 纽约 当地 时 间 星期 日 下 
午 5 点 (这 是 新 西 兰 一 个 工作 周 的 开始 ) 开始 营业 ， 纽 约 当地 时 间 星期 五 下 午 5 点 歇业 。 














主要 的 交易 货币 有 (括号 中 是 对 应 的 首 字 母 缩写 ) : 美元 (USD)、 欧 元 (EUR)、 日 元 
(JPY)、 英 镑 (GBP)、 澳 元 (AUD)、 加 元 (CAD) 以 及 瑞士 法 郎 (CHF)。 一 般 情 况 下 ， 
一 个 经 纪 商 会 列 出 6 到 40 个 外 汇 交 易 组 合 (也 叫 外 汇 对 )。 





所 有 这 些 对 我 们 来 说 意味 着 什么 呢 ? 


。 需要 从 服务 端 向 客户 端 发 送 两 个 价格 ， 以 及 一 个 时 间 惟 。 

。 需要 处 理 多 个 外 汇 对 。 

。 需要 以 最 小 的 延迟 来 处 理 (突然 的 波动 和 过 时 的 价格 信息 会 使 交易 商 蒙 受 经 济 损失 )。 
。 我 们 的 应 用 需要 连续 运行 120 小 时 ， 然 后 闲置 48 小 时 ， 如 此 循环 往复 。 


3.2 后 端 


本 章 的 后 端 示 例 远 比 第 2 章 的 复杂 。 我 们 需要 多 重 数据 服务 (也 就 是 外 汇 对 )， 如 果 想 给 
老板 留 下 深刻 的 印象 ， 不 妨 称 之 为 多 路 技术 。 这 个 应 用 要 能 用 来 做 可 重复 的 测试 ， 有 看 上 
去 很 逼真 的 数据 ， 还 要 对 所 有 连接 的 客户 端 都 是 同步 的 ， 并 且 不 使 用 任何 数据 库 。 要 求 真 
高 ! 但 这 能 办 到 ， 以 下 是 会 用 到 的 技术 。 
































。 单行 的 JSON 协议 。 

。 随机 种 子 。 一 个 指定 的 随机 种 子 总 是 能 生成 一 个 相同 的 数据 流 。 这 里 用 它 为 每 一 个 外 汇 
对 生成 一 个 完全 可 预测 的 数据 集 。 

。 允许 客户 端 指定 随 机 种 子 ， 使 客户 端 可 以 重复 地 请 求 相 同 的 测试 数据 。 

。 将 不 同时 长 的 周期 循环 加 在 一 起 ， 再 结合 一 点 随机 噪声 来 产 出 数据 ， 这 使 得 数据 看 起 来 
更 贴近 现实 (本 书 不 是 讨论 随机 行走 和 有 效 市 场 理 论 的 地 方 ,如 果 你 对 那个 主题 感 兴趣 ， 
可 以 找 个 经 济 学 家 聊 聊 )。 

。 检测 时 间 偏差 并 矫正 。 












































注 1: 每 周 5 天、 每 天 24 小 时 的 营业 时 间 。 一 一 译 者 注 
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易 测 性 设计 
任何 系统 在 考虑 到 测试 的 情况 下 都 有 两 种 设计 方式 。 第 一 种 是 不 考虑 易 测 性 ， 第 二 种 
是 使 它 容 易 测 试 ， 这 通常 需要 葛 些 周折 ， 因 为 经 常 需要 添加 额外 的 变量 和 函数 。 


但 是 ， 在 易 测 原则 下 设计 的 系统 不 仅 是 要 容易 测试 ， 还 要 更 快 测试 ， 在 极端 情况 下 ， 
这 种 测试 速度 差异 就 像 调 用 一 个 取 值 器 〈 几 毫秒 就 能 完成 测试 ) 和 运行 一 个 引入 了 屏 
幕 抓 取 和 OCR (光学 字符 识别 ) 的 极度 复杂 解决 方案 (需要 耗费 上 千 写 秒 ) 的 区 别 。 
这 还 会 产生 连锁 反应 : 测试 运行 越 快 ， 测 试 的 次 数 就 越 多 ， 就 能 在 更 短 的 时 间 内 更 快 
地 发 现 bug， 产 品 就 能 以 更 好 的 质量 更 快 地 发 布 。 如 果 测 试 包 可 以 每 5 分 钟 运行 一 次 ， 
当 它 中 断 时 ， 你 能 很 快 查 出 代码 的 问题 所 在 ; 反之 ， 如 果 测 试 包 运 行 时 间 很 长 以 至 于 
只 能 在 周末 运行 ， 你 周一 早上 过 来 ， 可 能 要 到 周二 才能 找 出 是 上 周 哪 次 修改 引入 的 问 
题 。( 这 种 复杂 的 测试 方案 往往 很 脆弱 ， 比 如 对 布局 上 的 细微 改动 都 很 敏感 ) 。 


在 我 们 的 案例 中 ， 系 统 吐 出 随机 数据 (好 吧 ， 是 伪 随 机 数据 ) ， 此 处 的 易 测 性 设计 意 
为 控制 随机 上 顺序， 以 便当 需要 时 可 以 精确 地 重复 ， 这 是 被 称 为 参数 注入 的 测试 设计 
模式 。 

在 复杂 情况 下 ， 可 能 不 只 是 要 把 CPU 和 内 存 考虑 在 内 ， 还 要 考虑 网 络 ， 所 以 每 次 测 
试 的 运行 时 间 可 能 会 相差 很 多 ， 而 返回 的 JSON 中 包含 了 精确 到 毫秒 的 时 间 戳 ， 因 此 ， 
需要 想 办 法 确保 这 些 时 间 稚 也 是 可 复 验 的 ， 正 文中 有 关于 如 何 处 理 的 阅 述 (如果 不 做 
这 些 ， 只 是 对 接收 到 的 数据 进行 字段 范围 的 检查 ， 比 如 确保 每 个 时 间 稚 的 格式 正确 并 
且 比 前 一 个 时 间 惟 晚 ， 确 保价 格 都 在 95.00 到 105.00 之 间 等 。 这 毫 无 意义 ， 并 且 会 导 
致 遗 漏 一 些 不 易 发 现 的 bug， 从 而 导致 版 本 回 滚 ) 。 











我 们 要 做 的 第 一 个 设计 策略 ， 是 将 消息 以 JSON 字符 串 的 形式 传输 ， 并 严格 按照 一 行 一 个 
JSON 字符 串 、 每 条 消息 一 行 的 格式 返回 数据 。 这 个 设计 策略 很 合理 ， 因 为 JSON 是 一 种 
灵活 并 且 层 次 分 明 的 数据 格式 ， 在 后 面 的 章节 中 会 看 到 ， 这 种 一 行 一 条 信息 的 策略 能 够 使 
我 们 的 代码 更 加 容易 地 适用 于 不 支持 SSE 的 浏览 器 。 














如 果 你 读 了 3.1 节 中 关于 金融 行业 的 部 分 ， 就 会 知道 应 用 同时 要 公布 买 人 价 
和 卖 出 价 ， 我 故意 选择 了 这 样 做 ， 而 不 是 仅仅 发 送 一 个 价格 ， 因 为 这 会 更 难 
一 点 。 如 果 服 务 端 只 需 发 送 一 个 价格 ， 设 计策 略 会 更 简单 ， 但 如 果 需 要 再 加 
一 个 价格 ， 就 需要 做 大 量 的 重 构 。 按 支持 两 个 价格 的 数据 来 设计 ， 只 要 简单 
修改 一 下 代码 就 能 支持 N 个 价格 的 数据 ， 对 只 有 一 个 价格 的 数据 也 能 支持 得 
很 好 。 



























































图 3-1 是 后 端的 主 循环 流程 图 (如 在 第 2 章 中 看 到 的 ， 是 一 个 有 意 的 无 限 循环 )。 
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休眠 一 段 时 间 


选择 外 汇 对 
和 时 间 戳 


发 送 到 客户 端 















3-1; 后 端的 主 循环 


进入 循环 之 前 ， 有 几 步 初始 化 工作 要 做 : 定义 一 个 类 ， 创 建 测 试用 的 外 汇 对 ， 处 理 客户 端 
输入 的 参数 ， 设 置 Content-Type 数据 头 。 下 面 是 脚本 的 第 一 个 草稿 ， 使 用 了 硬 编码 的 价格 
(这 样 在 这 个 阶段 唯一 要 做 的 初始 化 就 是 设置 请 求 头 )， 代 码 如 下 所 示 : 

















<?php 
header("Content-Type: text/event-stream"); 


while (true) { 
$sleepSecs = mt_rand(250, 500) / 1000.0; 
usleep($sleepSecs * 1000000); 


$d = array( 
"timestamp" => gmdate("Y-m-d H:i:s"), 
"symbol" => "EUR/USD", 
"bid" => 1.303, 
"ask" => 1.304， 
); 

echo "data:" . json_encode($d) . "\n\n"; 

@ob_flush(); @flush(); 

} 


建议 先 用 下 面 的 命令 在 命令 行 运行 这 段 脚本 ， 而 不 是 党 试 通过 一 个 SSE 连接 来 调试 。 




















php fx_server.hardcoded.php 
这 就 是 SSE 协议 的 美妙 之 处 ， 它 是 一 个 简单 的 文本 协议 。 按 下 Ctrl-C 停止 运行 脚本 ， 会 
到 这 样 的 输出 结果 : 


data:{"timestamp":"2014-02-28 06:09:03","symbol":"EUR\/USD","bid":1.303, 
"ask":1.304} 


data:{"timestamp":"2014-02-28 06:09:04","symbol":"EUR\/USD","bid":1.303, 
"ask":1.304} 


data:{"timestamp":"2014-02-28 06:09:08","symbol":"EUR\/USD","bid":1.303, 
"ask":1.304} 


注意 ，EUR/USD 里 的 /在 JSON 中 被 转 义 了 。 另 外 ， 由 于 gmdate 被 调用 ， 我 们 看 到 的 输 
出 结果 里 都 是 GMT 时 间 惟 。 这 是 个 好 习惯 ， 总 是 以 GMT 格式 输出 并 保存 时 间 数 据 ， 如 
果 想 以 用 户 的 当地 时 区 格式 显示 ， 在 客户 端 上 调整 即 可 。 
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JSON/SSE 协议 的 开销 
用 JSON 格式 传输 数据 会 多 少 开 销 呢 ? 用 JSON 格式 和 用 最 简单 的 CSV 格式 
(data:2014-02-28 03:15:24,EUR/USD,1.303,1.304) 相 比 会 相差 多 少 呢 ? SSE 协议 本 身 
又 有 多 少 开销 呢 ? 
最 后 一 个 问题 很 简单 ，SSE 的 开销 是 每 条 消息 6 字 节 ， 也 就 是 “data:” 和 额外 的 换行 
符 。 这 可 以 看 做 是 第 6 章 和 第 7 章 中 介绍 的 向 后 兼容 方案 。 
JSON 字符 囊 可 以 不 用 这 么 长 ， 出 于 易 读 的 目的 我 采用 了 兄长 的 字段 名 ， 不 然 它 也 可 

data:{"t":"2014-02-28 06:09:03","s":"EUR\/USD","b":1.303,"a":1.304} 

如 果 是 二 进 制 的 协议 会 怎样 呢 ? 不论 JavaScript 还 是 SSE 都 不 适合 用 二 进 制 ， 暂 且 不 
管 这 个 ， 时 间 玲 需要 4 字 节 (即便 需要 精确 到 毫秒 ， 或 者 需要 用 到 2030 年 ， 最 多 也 
就 需要 8 字 节 )， 外 汇 对 需要 7 字 节 加 一 个 替 终 止 符 ,， 买 入 价 / 卖 出 价 分 别 需 要 8 字 
节 ， 一 共 是 28 字 节 (假设 一 条 数据 的 结束 符 是 隐 性 的 ) 。 表 3-1 对 此 进行 了 概括 。 


表 3-1: 不 同 数据 格式 所 需 的 字 节 数 对 比 














使 用 SSE 使 用 向 后 兼容 
二 进 制 34 28 
CSV 46 40 
简短 的 JSON 69 63 
易 读 的 JSON 86 80 


因为 我 们 会 立刻 清除 数据 〈 以 最 大 限度 降低 延迟 ) ， 你 可 能 想 把 每 条 信 
息 的 TCP/IP 包 和 以 太 网 络 帧 的 开销 也 包含 进来 。 如 果 和 一 个 轮 询 方案 
比较 ， 这 可 能 是 合理 的 ， 比 如 ， 以 平均 一 秒 一 条 消息 的 频率 推送 数据 ， 
那 就 会 比 一 分 钟 一 次 的 轮 询 多 出 59 倍 的 TCP/IP 数据 包 ， 如 果 涉 及 WiFi 
和 移动 网 络 的 情况 ， 这 个 差距 可 能 还 会 更 大 。 但 是 如 果 用 轮 询 (尤其 是 
长 轮 询 ， 见 第 6 章 )， 不 要 忘 了 每 个 方向 (服务 端 到 客户 端 和 客户 端 到 
服务 端 ) 的 请 求 都 要 把 HTTP 请 求 头 考虑 在 内 。 记 住 ，cookie 和 鉴定 文 
件 头 是 随 着 每 次 请 求 发 送 的 。 


























正如 第 1 章 中 提 到 的 ， 要 对 两 种 替代 方案 做 一 个 有 效 的 对 比 ， 我 认为 最 好 的 方式 是 在 尽 
可 能 真实 的 负载 条 件 下 搭建 这 两 种 方案 ， 然 后 以 同样 的 标准 进行 测试 对 比 。 真 实 的 也 意 
味 着 服务 器 和 测试 客户 端 应 该 处 在 不 同 的 数据 中 心 ， 除 非 是 在 做 一 个 公司 内 网 的 应 用 。 
在 以 表 3-1 的 数据 为 基础 做 出 决策 之 前 ， 请 记 住 ，SSE 通信 数据 能 够 并 且 应 该 用 GZIP 
格式 压缩 ， 数 据 越 紧凑 ，GZIP 能 压缩 的 量 就 越 少 。 

我 们 的 外 汇 数据 做 得 很 漂亮 并 且 有 规律 ， 所 以 你 可 能 会 打算 用 CVS 格式 取代 JSON 格 
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式 。 我 会 继续 用 JSON ， 因 为 在 其 他 应 用 中 数据 可 能 不 会 这 么 简单 (JSON 能 处 理 说 套 
数据 结构 ) ， 并 且 新 增 一 个 字段 也 很 简单 。 事 实 上 ， 随 着 该 应 用 的 展开 ， 会 引入 更 复 
杂 的 数据 结构 。 我 将 坚持 使 用 易 读 的 字段 名 ， 以 帮 我 们 保持 思路 清晰 。 








在 最 初 的 fx_server.hardcoded.php 中 ， 实 现 了 后 端 流程 中 3 个 高 级 步骤 中 的 2 步 : 休眠 和 
发 送 数据 到 客户 端 。 在 下 一 节 中 ， 会 实现 对 外 汇 对 和 价格 的 选择 ， 而 不 用 对 它们 硬 编码 。 








3.3 前 端 


后 面 会 进一步 完善 后 端 代 码 ， 但 既然 现在 已 经 有 了 一 个 最 简单 的 服务 端 脚本 。 接 下 来 就 是 
要 创建 一 个 最 简单 的 HTML 页 面 ， 代 码 如 下 : 


























<!doctype htmL> 
<htmL> 
<head> 
<meta charset="UTF-8"> 
<title>FX Client: Latest prices</title> 
</head> 
<body> 


<table border="1" cellpadding="4" cellspacing="0"> 

<tr> 
<th>USD/JPY</th> 
<th>EUR/USD</th> 
<th>AUD/GBP</th> 

</tr> 

<tr> 
<td id="USD/JPY"></td> 
<td id="EUR/USD"></td> 
<td id="AUD/GBP"></td> 

</tr> 

</table> 


<script> 

var es = new EventSource("fx_server.hardcoded.php"); 

es.addEventListener("message", function (e) { 
var d = JSON.parse(e.data); 
document.getElementById(d.symbol).innerHTML = d.bid; 
}, false); 

</script> 


</body> 
</html> 


在 浏览 器 中 访问 这 个 页 面 ， 会 看 到 一 个 有 3 列 的 表格 ， 中 间 EUR/USD 这 一 列 的 单元 格 
里 会 出 现 1.303， 仪 此 而 已 。 这 非常 枯燥 无 味 ， 对 吧 ? 但 是 ， 服 务 端 确实 在 重复 地 发 送 
1.303。 这 段 前 端 代码 ， 虽 然 很 基础 ， 但 将 在 后 端 做 的 每 一 个 优化 都 有 效 。 


如 果 你 看 过 第 2 章 ， 上 面前 两 行 JavaScript 代码 应 该 看 起 来 很 熟悉 ， 创 建 一 个 EventSource 
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对 象 ， 指 定 要 连接 的 服务 器 地 址 ， 然 后 把 包含 了 一 段 JSON 字符 串 的 e.data 赋值 给 
message 事件 处 理 程序 ， 所 以 事件 处 理 程序 的 第 一 行 是 var d = JSON.parse(e.data); ， 用 
以 把 字符 串 转 化 成 JavaScript 对 象 。 





如 果 JSON 数据 有 问题 ，JSON.parse 会 抛 出 一 个 异常 。 从 第 5 章 开 始 ， 我 们 
会 把 它 包 在 try{} 和 catch(e){} 块 中 ， 作 为 使 这 段 代码 达到 产品 级 品质 所 采 
取 的 措施 之 一 。 











事件 处 理 程序 中 的 第 二 行 前 半 部 分 从 document.getElementById(d.symbol) 开始 ， 用 以 找到 
HTML 中 对 应 的 表格 单元 格 ， 它 是 这 些 id="USD/IPY"、id="EUR/USD"、id="AUD/GBP” 中 的 
一 个 。 后 半 部 分 代码 .innerHTML = d.bid 用 以 将 买 入 价 填 充 到 前 面 获取 的 单元 格 中 。 


hl 
































我 们 在 后 面 还 会 讨论 前 端的 问题 ， 但 现在 先 回 过 头 来 看 一 下 后 端 代码 。 


3.4 可 复 现 的 真实 随机 数据 


之 前 我 们 创建 了 一 个 生成 可 复 现 数据 的 脚本 ,现在 要 让 这 些 数据 具备 随机 性 和 真实 性 。fx_ 
server.hardcoded.php 的 第 一 个 问题 是 仅 有 一 个 外 汇 对 ， 但 我 们 需要 不 同 的 外 汇 对 〈 即 货币 
组 合 )。 鉴 于 外 汇 对 之 间 有 很 多 共性 ， 只 是 数值 不 同 ， 我 们 创建 了 FEXPair 类 ， 如 下 面 的 代 
码 所 示 。 如 果 对 PHP 的 类 不 熟 ， 可 以 参考 附录 C.1 市 。 




















<?php 

class FXPair { 
/** 外 汇 对 名 称 */ 
private $symbol; 
/** 买 入 价 基 准 值 */ 
private $bid; 
/** 价差 。 与 $bid 相 加 得 到 " 卖 出 价 "”*/ 
private $spread; 
/** 价格 精确 到 的 小 数 点 位 数 */ 
private $decimalPlaces; 
/** 一 次 大 循环 的 时 长 秒 数 */ 
private $longCycle; 
/** 一 次 小 循环 的 时 长 秒 数 */ 


private $shortCycle; 

















/ie 构造 函数 */ 





注 2: 支持 SSE 的 浏览 器 都 支持 JSON.parse， 但 是 ， 在 讨论 针对 旧版 浏览 器 的 向 后 兼容 方案 时 ， 会 发 现 有 
些 旧 版 浏览 器 实在 太 落 后 了 ， 无 法 支持 JSON.parse， 特 别 是 了 EGIE7。 不 过 要 修复 这 个 问题 并 不 难 。 
注 3: HTML5 中 ，DOM 的 ID 可 以 包含 除 空格 外 的 任何 字符 ， 但 是 ， 如 果 你 的 代码 要 兼容 IE7 或 者 IE8 等 
HTML4 浏览 器 ， 你 就 需要 修改 一 下 数据 中 这 些 外 汇 对 的 名 称 ， 比 如 ， 要 把 所 有 的 “/” 替 换 成 “_”， 
DOM 的 ID 就 会 变 成 "USD_JPY"、"EUR_USD" 等 。( 还 要 确保 ID 不 是 以 数字 开头 ， 在 IE6 中 ， 还 要 确 
保 不 是 以 下 划 线 开头 ) 。 
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public function __construct($symbol, $b, $s, $d, $c1, $c2) { 
Sthis->symboL = $symbol; 
sthis->bid = $b; 
Sthis->spread = $s; 
Sthis->decimaLPLaces = $d; 
Sthis->LongCyctLe = $c1; 
$sthis->shortCycle = $c2; 
} 


/xx @param int St 从 1979 年 到 现在 的 秒 数 */ 
public function generate($t) { 
$bid = $this->bid; 
$bid += $this->spread * 100 * 
sin((360 / S$this->longCycle) * (deg2rad($t % S$this->longCycle))); 
$bid += $this->spread * 30 * 
sin((360 / S$this->shortCycle) * (deg2rad($t % $this->shortCycle))); 
$bid += (mt_rand(-1000, 1000) / 1000.0) * 10 * $this->spread; 
$ask = $bid + $this->spread; 


return array( 
"timestamp" => gmdate("Y-m-d H:i:s", $t), 
"symbol" => $this->symbol, 
"bid" => number_format($bid, $this->decimalPlaces), 
"ask" => number_format($ask, $this->decimalPlaces), 


); 
} 
该 类 有 买 入 价 、 价 差 、 精 确 位 数 这 些 成 员 变量 。bid 保存 买 入 价 基 准 值 : 买 信 价 的 值 会 在 
这 个 基础 上 波动 。spread 是 买 入 价 和 卖 出 价 之 间 的 价差 (参见 3.1 节 )。 为 什么 有 一 个 精确 


位 数 成 员 变量 ? 因为 一 般 涉及 日 元 (JPY) 的 货币 价格 是 精确 到 小 数 点 后 3 位 ， 甚 他 货币 
的 是 小 数 点 后 5 位 。 








还 有 两 个 成 员 变 量 : long_cycle 和 short_cycte。 在 generate 函数 中 会 看 到 它们 控制 着 价 
格 波动 的 速度 。 使 用 两 个 周期 的 目的 是 让 周期 性 表现 看 上 去 更 有 趣 一 点 。 长 周期 的 权重 
是 100， 短 周期 的 权重 是 30， 除 此 之 外 ， 还 加 入 了 一 些 随 机 噪声 ， 权 重 是 10。 你 是 不 是 
想 问 (mt_rand(-1090,1090)/1099.0) ? PHP 没有 生成 随机 浮 点 数 的 函数 ， 所 以 这 里 创建 了 
一 个 从 -1000 到 +1000 ( 含 -1000 和 +1000) 的 随机 整数 ， 然 后 除 以 1000 来 获得 的 一 个 从 
一 1.000 到 +1.000 的 随机 浮 点 数 ， 每 次 都 乘 以 价差 和 权重 。 





关于 为 什么 用 mt_rand 以 及 随机 种 子 怎么 设置 的 问题 ， 参 见 附录 C.2 市 。 


最 后 ，generate 返回 一 个 关联 数组 〈 即 JavaScript 中 的 对 象 、.NET 中 的 字典 、C++ 中 的 映 
射 )。number_format 用 来 裁 掉 多 余 的 小 数 点 位 数 ， 所 以 ，98.1234545984 变 成 了 98.123。 
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怎么 使 用 这 个 类 呢 ? 在 fx_server.seconds.php 的 最 上 面 为 每 一 个 外 汇 对 创建 了 一 个 对 象 
(EUR/USD 出 现 了 两 次 ， 因 为 我 们 想 让 它 以 两 倍 于 其 他 外 汇 对 的 频率 更 新 ) : 








$symbols = array( 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("USD/JPY", 95.10, 0.01, 3, 341, 55), 
new FXPair("AUD/GBP", 1.455, 0.0002, 5, 319, 39), 
); 


接 下 来 ， 在 主 循环 中 随机 获取 一 个 要 修改 的 外 汇 对 : 





$ix = mt_rand(0,count($symbols)-1); 

然后 ， 在 fx_server.hardcoded.php 中 把 硬 编码 的 $d 数组 替换 成 调用 generate: 
$d = $symbols[$ix]->generate($t); 

完整 的 仅 _server.seconds.php 代码 如 下 所 示 : 


<?php 
include_once("fxpair.seconds.php"); 


header("Content-Type: text/event-stream"); 


$symbols = array( 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("USD/JPY", 95.10, 0.01, 3, 341, 55), 
new FXPair("AUD/GBP", 1.455, 0.0002, 5, 319, 39), 
); 


while (true) { 
$sleepSecs = mt_rand(250, 500) / 1000.0; 
usleep($sleepSecs * 1000000); 


St = time(); 
$ix = mt_rand(0, count($symbols) - 1); 
$d = $symbols[$ix]->generate($t); 


echo "data:" . json_encode($d) . "\n\n"; 
@ob_flush();@flush(); 
} 


注意 一 下 关于 这 段 代 码 的 几 个 细节 ， 生 成 的 价格 只 是 以 当前 时 间 为 基础 ， 而 不 会 保存 先前 
的 值 ， 然 后 在 此 基础 上 随机 地 加 / 减 ， 这 可 能 也 是 你 首先 想到 的 实现 随机 价格 的 方案 。 这 
段 代 码 不 仅 漂亮 整洁 ， 还 可 以 进行 可 复 现 的 可 靠 测试 ， 而 且 还 会 带 来 一 个 好 处 : 可 以 在 
$symbols 数组 中 放 两 个 EUR/USD 的 FXPair 对 象 ， 从 而 获取 两 倍 于 其 他 外 汇 对 的 价格 数据 。 











为 什么 用 usleep() 而 不 是 sleep() ?参见 附录 C.6 市 。 


是 不 是 在 想 ， 既 然 $t 只 是 用 来 传 给 generate() 的 ， 为 什么 还 要 在 主 循环 中 给 它 赋值 ， 
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而 没有 把 处 = time(); 放 在 generate() 里 ? 这 要 回 到 3.2 市 的 附注 内 容 “ 易 测 性 设计 ”: 
通过 使 用 一 个 参数 ， 我 们 可 以 传 入 某 个 确定 的 值 ，generate() 则 总 是 能 返回 一 个 相同 的 结 
果 ， 这 样 能 很 容易 创建 generate() 的 单元 测试 ， 如 果 不 这 人 么 做 ， 全 局 函数 time() 就 成 了 
generate() 函数 的 一 个 附属 品 。 而 这 会 让 人 感觉 很 不 舒服 。[“ 很 不 舒服 ”是 从 100 多 页 的 
XxUnit Test Patterns (Gerard Meszaros 车 ，Addison-Wesley 出 版 社 出 版 ) 一 书 中 总 结 出 来 的 
结论 。 如 果 你 想 更 深入 地 了 解 这 一 点 ， 可 以 看 看 那 本 书 。] 


3.5 ” 精 磨 时 间 戳 


在 命令 行 运行 fx_server.seconds.php， 会 看 到 这 些 输 出 : 









































data:{"timestamp":"2014-02-28 06:49:55","symbol":"AUD\/GBP" 
"ask":"1.47239"} 


"bid":"1.47219", 


~ 


data:{"timestamp":"2014-02-28 06:49:56","symbol":"USD\/JPY" 
"ask":"94.966"} 


"bid":"94.956", 


~ 


data:{"timestamp":"2014-02-28 06:49:56","symbol":"EUR\/USD" 
"ask":"1.30941"} 


"bid"s"t,30931"; 


~ 


data:{"timestamp":"2014-02-28 06:49:57","symbol":"EUR\/USD" 
"ask":"1.30993"} 


"bid "1s30983"; 


~ 


data:{"timestamp":"2014-02-28 06:49:57","symbol":"EUR\/USD" 
"ask":"1.30985"} 


"bid":"1.,30975",; 


~ 


data:{"timestamp":"2014-02-28 06:49:57","symbol":"AUD\/GBP" 
vask":"1:47255"} 


bid "se L47235; 


~ 


data:{"timestamp":"2014-02-28 06:49:58","symbol":"AUD\/GBP" 
"ask":"1.47149"} 


"bid":"1.47129", 


~ 

















数据 看 起 来 很 漂亮 并 且 是 随机 的 ， 对 吧 ? 但 如 果 看 入 了 ， 就 会 发 现 这 是 我 们 之 前 输入 的 长 
周期 和 短 周期 程序 指令 。 注 意 看 EUR/USD 有 两 个 时 间 改 一 样 的 数据 ， 接 下 来 要 做 的 就 是 
把 毫秒 加 到 时 间 惟 中 。 

只 需要 这 样 改 一 下 代码 : 

(1) 在 主 循环 中 ， 用 microtime(true) 替代 time()，; 

(2) 在 generate() 中 ， 把 毫秒 加 到 已 经 格式 化 的 时 间 截 里 。 





microtime(true) 返回 一 个 浮 点 数 : 从 1970 年 到 当前 时 间 惟 的 秒 数 (和 time() 一 样 )， 但 
精确 到 了 毫秒 。 


怎么 来 格式 化 时 间 惟 ? 现在 是 这 样 的 : 


'timestamp'=>gmdate("Y-m-d H:i:s",$t), 
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这 个 仍然 管用 ， 即 使 毕 是 一 个 浮 点 数 ， 它 仍然 是 从 1970 年 到 现在 的 秒 数 ，PHP 会 为 
gmdate() 国 数 隐 式 地 把 它 转化 成 整数 。 所 以 只 需要 把 毫秒 数 加 上 去 。 


可 以 通过 (St*1000)%1000 获取 毫秒 数 〈 先 乘 以 1000 将 $t 变 成 从 1970 年 到 现在 的 毫秒 数 ， 
然后 取 最 后 3 位 数 ) ， 然 后 用 sprintf 对 它 进 行 格式 化 ， 这 样 它 就 会 总 是 3 位 数字 的 格式 ， 
并 且 前 面 还 会 有 一 个 小 数 点 : 





'timestamp'=>gmdate("Y-m-d H:i:s",$t).sprintf(".%03d",($t*1000)%1000), 
以 下 是 新 版 FXPair 类 的 全 部 代码 : 


<?php 

class FXPair { 
/** 外 汇 对 的 名 称 * 
private $symbol; 
/** 买 入 价 基准 值 */ 
private $bid; 
/** 价差 ， 与 $bid 相 加 得 到 " 卖 出 价 ”*/ 
private $spread; 
/** 价格 的 精确 小 数 点 位 数 */ 
private $decimalPlaces; 
/** 一 次 大 循环 的 时 长 秒 数 */ 
private $longCycle; 
/xx 一 次 小 循环 的 时 长 秒 数 */ 


private $shortCycle; 


/** 构造 函数 */ 
public function __construct($symbol, $b, $s, $d, $c1, $c2) { 
$this->symbol = $symbol; 
$sthis->bid = $b; 
$this->spread = $s; 
$sthis->decimalPlaces = $d; 
$sthis->longCycle = $c1; 
$sthis->shortCycle = $c2; 














} 


/** @param float St 从 1979 年 到 现在 的 秒 数 ， 精 确 到 毫秒 */ 
public function generate(St) { 
$bid = $this->bid; 
$bid += $this->spread * 100 * 

sin((360 / S$this->longCycle) * (deg2rad($t % S$this->longCycle))); 
$bid += $this->spread * 30 * 

sin((360 / S$this->shortCycle) * (deg2rad($t % S$this->shortCycle))); 
$bid += (mt_rand(-1000, 1000) / 1000.0) * 10 * $this->spread; 
$ask = $bid + $this->spread; 
return array( 

"timestamp" => gmdate("Y-m-d H:i:s", $t) . 

sprintf(".%03d", ($t * 1000) % 1000)， 

"symbol" => $this->symbol, 

"bid" => number_format($bid, $this->decimalPlaces), 

"ask" => number_format($ask, $this->decimalPlaces), 


3 
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下 面 这 段 fx_server.milliseconds.php 脚本 用 到 了 它 











<?php 
include_once("fxpair.milliseconds.php"); 


header("Content-Type: text/event-stream"); 


$symbols = array( 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("USD/JPY", 95.10, 0.01, 3, 341, 55), 
new FXPair("AUD/GBP", 1.455, 0.0002, 5, 319, 39), 


); 


while (true) { 
$sleepSecs = mt_rand(250, 500) / 1000.0; 
usleep($sleepSecs * 1000000); 


St = microtime(true); 

$ix = mt_rand(0, count($symbols) - 1); 
$d = $symbols[$ix]->generate($t); 

echo "data:".json_encode($d) . "\n\n"; 
@ob_flush();@flush(); 

} 


运行 fx_server.milliseconds.php 时 ， 会 看 到 这 样 的 输出 结果 : 


data:{"timestamp":"2014-02-28 06:49:55.081","symbol":"AUD\/GBP", 
bild "i47219" "ask "2"147239"} 


data:{"timestamp":"2014-02-28 06:49:56.222","symbol":"USD\/JPY", 
"bid":"94.956","ask":"94.966"} 


data:{"timestamp":"2014-02-28 06:49:56.790","symbol":"EUR\/USD", 
"bid":"1.30931","ask":"1.30941"} 


data:{"timestamp":"2014-02-28 06:49:57.002","symbol":"EUR\/USD", 
"bid":"1.30983","ask":"1.30993"} 


data:{"timestamp":"2014-02-28 06:49:57.450","symbol":"EUR\/USD", 
"bid":"1.30972","ask":"1.30982"} 


data:{"timestamp":"2014-02-28 06:49:57.987","symbol":"AUD\/GBP", 
vbid"s "L47235" "ask" "1.47255"} 


data:{"timestamp":"2014-02-28 06:49:58.345","symbol":"AUD\/GBP", "bid":"1.47129","a 
sk":"1.47149"} 


在 本 书 的 源码 里 ， 有 一 个 叫 fx_client.basic.milliseconds.html 的 文件 ， 它 使 你 能 够 在 浏览 器 
中 看 到 如 图 3-2 所 示 的 结果 。 每 次 运行 这 个 脚本 时 ， 都 会 看 到 3 个 货币 价格 的 起 落 ， 如 果 
你 有 有 盯 着 油漆 变 干 “的 嗜好 ， 应 该 会 看 得 很 享受 。 这 也 有 利于 人 工 测 试 ， 只 要 你 不 介意 至 





























注 4:“ 采 着 油漆 干 "， 原 文 “watching paint dry"， 形 容 一 件 很 漫长 而 无 趣 的 事 ， 就 像 困 着 新 刷 的 油漆 等 它 
干 一 样 。 一 一 译 者 注 
































少 盯 着 它 看 6 分 钟 (长 周期 的 时 长 )。 但 是 每 次 运行 这 个 脚本 ， 外 汇 对 的 价格 ， 出 现 的 顺 
序 ， 当 然 还 有 时 间 戳 ， 都 会 不 一 样 。 回 顾 一 下 3.2 市 的 附注 内 容 “ 易 测 性 设计 "， 想 想 为 什 
么 我 们 想 要 对 它 做 出 改进 。 
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3-2: 运行 了 几 秒 之 后 的 fx_client.basic.milliseconds.html 


3.6 ”控制 好 随机 性 


本 章 接 下 来 的 内 容 都 是 关于 后 端 优化 的 。 如 果 你 对 前 端 更 感 兴趣 ， 可 以 略 过 
并 直接 去 看 第 4 章 。 




















试 一 下 在 fx_server.milliseconds.php 的 最 上 面 加 上 这 一 行 : mt_srand(123);。 它 将 随机 种 子 
设 成 了 指定 的 值 。 














停止 运行 这 段 脚本 ， 然 后 再 重新 运行 ， 注 意 到 了 什么 ? 如 果 你 原本 以 为 设置 随机 种 子 会 产 
生 一 个 可 复 现 的 结果 ， 那 现在 你 一 定 震惊 了 : 一 切 都 发 生 了 变化 。 但 仔细 看 ， 会 看 到 那些 
跳动 着 的 外 汇 对 的 顺序 是 不 变 的 ，EUR/USD 跳 3 次 ， 然后 USD/JPY 跳 3 次 ， 然 后 AUD/ 
GBP 跳 3 次 ,然后 USD/JPY 跳 3 次 *。 这 很 有 意义 ， 因 为 控制 下 一 个 外 汇 对 符号 的 代码 
Six = mt_rand(0,count($symbols)-1) 是 一 个 简单 的 随机 代码 。 


如 果 你 看 得 非常 仔细 ， 会 发 现 每 两 个 时 间 蕉 之 间 的 差 值 几乎 是 一 样 的 。 比 如 ， 在 一 次 
运行 中 相差 431 毫秒 ， 再 次 运行 相差 430 毫秒 ， 第 三 次 运行 还 是 相差 431 毫秒 。 这 也 
是 有 意义 的 ， 因 为 两 次 跳动 之 间 的 时 间 间 隔 也 是 一 个 简单 的 随机 代码 : $sleepSecs=mt_ 
rand(250,500)*1000; 。 计 时 的 差异 是 因为 CPU 的 速度 ， 即 服务 器 当时 的 忙碌 程度 以 及 地 
球 另 一 边 有 只 蝴蝶 在 振动 翅膀 造成 的 。 























但 是 为 什么 价格 会 不 同 呢 ? 因为 它们 都 是 以 $t (服务 器 当前 的 时 间 ) 为 基础 ， 再 加 入 了 一 
点 随机 的 噪声 。 因 为 ， 我 们 需要 对 st 加 以 控制 。 现 在 ， 你 的 第 一 想法 是 不 是 这 样 : 在 运 
行 每 个 单元 测试 之 前 ， 修 改 一 下 系统 时 间 ? 我 喜欢 你 的 范 儿 。 当 我 们 需要 穿 过 一 面 墙 而 手 
里 只 有 一 把 大 锤 的 时 候 ， 和 希望 有 你 在 身边 。 老 实说 ， 我 也 这 么 想 过 。 



































注 5: 指定 随机 种 子 后 ， 确 切 的 随机 顺序 会 因 PHP 的 版 本 不 同 而 不 同 ， 可 能 还 会 与 操作 系统 版 本 有 关 ， 写 
作 本 书 时 ， 我 用 的 是 64 位 Linux 的 PHP 5.3。 
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但 在 这 种 情况 中 ， 穿 过 那 堵 墙 有 更 简单 的 方式 : 从 门 穿 过 去 。 而 且 那 还 是 我 们 之 前 就 已 经 放 
在 那儿 的 。 我 说 的 是 把 $t 传 给 generate()， 而 不 是 让 generate() 自己 调用 microtime(true)。 




















来 感觉 一 下 ， 用 St=1234567896.0; 替换 St = microtime(true);。 现 在 输出 结果 如 下 所 示 : 





data:{"timestamp":"2009-02-13 23:31:30.000" ,"symboL" :"EURN/USD" ， 
"bid":"1.31103","ask":"1.31113"} 


这 样 修改 之 后 ， 每 次 运行 脚本 ，$t 的 值 都 是 一 样 的 ， 与 CU、 负载 或 昆虫 行为 无 关 。 
我 们 当然 不 想 让 它 一 直 都 是 2009 年 2 月 13 日 。 下 面 是 我 们 代码 的 下 一 个 版 本 ， 提 供 了 控 











制 St 的 选项 : 


<?php 
include_once("fxpair.milliseconds.php"); 


header("Content-Type: text/event-stream"); 


$symbols = array( 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("EUR/USD", 1.3030, 0.0001, 5, 360, 47), 
new FXPair("USD/JPY", 95.10, 0.01, 3, 341, 55), 
new FXPair("AUD/GBP", 1.455, 0.0002, 5, 319, 39), 
); 


if (isset($argc) && Sargc >= 2) 
$t = $argv[1]; 
elseif (array_key_exists("seed", $_REQUEST)) 
St = $_REQUEST["seed"]; 
else { 
St = microtime(true); 
echo "data:{\"seed\":$t}\n\n"; 


mt_srand(St * 1000); 


while (true) { 
$sleepSecs = mt_rand(250, 500) / 1000.0; 
usleep($sleepSecs * 1000000); 
St += $sleepSecs; 


$ix = mt_rand(0, count($symbols) - 1); 
$d = $symbols[$ix]->generate($t); 


echo "data:" . json_encode($d) . "\n\n"; 
@ob_flush(); @flush(); 
} 





和 fx_server.milliseconds.php 相 比 ， 最 大 的 变化 是 主 循环 前 面 的 那 段 代码 块 。 但 事 
实 上 ， 这 段 代码 很 普通 ， 如 果 从 命令 行 (if(isset($argc)...) 中 运行 脚本 ， 它 会 获 
取 命 令 行 的 第 一 个 参数 作为 seed 的 值 ， 如果 在 浏览 器 中 运行 ， 它 会 查找 名 为 seed 的 
参数 “并 使 用 那个 〈$_REQUEST[ 'seed' ]; ) ;如 果 前 两 者 都 没有 设置 ， 就 使 用 当前 时 间 来 初 
































始 化 ， 然 后 它 会 输出 一 行 信息 ， 表 明 它 使 用 的 是 哪个 seed。 这 样 的 话 ， 如 有 果 昌 





和 现 什么 问题 ， 
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可 以 用 这 个 随机 种 子 重新 生成 数据 流 。 获 得 随机 种 子 之 后 ， 就 调用 mt_srand。 把 St 乘 以 
1000，mt_srand 会 把 它 截 断 成 整数 ， 这 就 是 我 们 所 说 的 精确 到 毫秒 ， 而 不 是 精确 到 微 秒 。 


主 循环 中 的 修改 很 简单 。 将 St=microtime(true); 从 循环 的 开头 移 除 ， 然 后 在 循环 末尾 
给 St 加 上 了 休眠 的 秒 数 。 换 句 话 说， 如果 st 是 1234567890.0， 也 就 是 模拟 当前 时 间 是 
2009-02-13 23:31:30.000， 然 后 休眠 0.325 秒 ， 更 新 之 后 模拟 的 当前 时 间 就 是 2009-02-13 
23:31:30.325。 


3.7 ”为 时 间 的 真正 流逝 留 出 余地 


多 么 有 趣 的 小 标题 ! 从 单元 测试 的 角度 来 说 ， 上 一 节 末 尾 的 那 段 代 码 已 经 足够 好 了 。 但 
是 ， 你 ee ee 为 了 一 探究 竟 ， 我 把 下 面 这 段 代 码 ”加 到 了 echo 
"data:"... 上 面 : 
































$now=microtime(true); 
echo ":" 
gmdate("Y-m-d H:i:s",S$now). 
sprintf(".%03d",(S$now*1000)%1000). 
"\n"; 
在 一 行 前 面 加 一 个 冒号 是 SSE 里 的 注释 方式 。 在 浏览 器 中 看 不 到 注释 ， 所 以 在 命令 行 中 运 
行 这 个 脚本 。 刚 开始 时 $now 和 $t 是 同步 的 ， 但 是 跳动 几 次 之 后 ，$now 可 能 会 慢 儿 毫秒 。 
去 烧 一 壶 水 吧 ， 回 来 的 时 候 这 个 差 值 会 变 成 几 百 毫秒 。 运 行 24 小 时 的 话 会 差 儿 分 钟 。( 顺 
便 说 一 下 ， 这 个 问题 在 你 给 定 一 个 种 子 时 也 会 存在 ， 只 是 更 难看 出 。) 


a 那 只 是 测试 数据 ， 确 实 不 是 很 重要 ， 但 调整 休眠 时 间 以 使 它 匹 配 真 实 的 时 间 流 逝 ， 
是 你 必 备 的 一 项 技能 。 所 以 ， 我 们 快 点 行动 吧 。 


这 里 会 用 一 个 变量 Sctock 来 保存 服务 器 时 间 。 在 脚本 开始 时 会 把 服务 器 当前 时 间 赋 给 
$clock， 但 真正 发 挥 作用 的 修改 是 在 主人 循环 中 。$now=microtime(true); 又 回来 了 ! 然后 通 
过 $adjustment = $now - $clock; 来 计算 时 间 的 偏差 。 这 里 的 关键 概念 是 ， 要 休眠 时 ， 让 休 
眠 时 间 比 原来 想 要 的 少 一 点 
































Usleep( ($sleepSecs - Sadjustment) * 1000000); 





$t 还 是 像 前 面 一 样 更 新 ， 即 加 上 $sleepsecs， 不 需要 使 用 $adjustment， 但 是 当 以 相同 的 
方式 更 新 $clock，$clock 代表 着 理想 情况 下 (假设 处 理 器 运行 得 无 穷 快 ) 的 服务 器 时 间 。 


















































注 6: 是 的 ， 这 里 故意 用 的 $_REQUEST， 这 样 就 可 以 从 GET、POST， 甚 至 cookie 中 获取 数据 ， 在 这 里 ， 能 
够 通过 cookie 设置 随机 种 子 是 个 特性 , 而 不 是 bug ! 更 多 关于 PHP 超 全 局 变量 的 信息 参见 附录 C“ 超 
全 局 变量 ”。 

注 7: 可 以 在 本 书 源码 的 fx_server.repeatable_with_datestamp.php 文件 中 找到 这 上 段 代码 。 
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fx_server.adjusting.php 文件 的 完整 代码 如 下 所 示 ， 从 本 书 的 源 代 码 中 也 可 以 找到 fx_server. 
adjusting_with_datestamp.php， 它 还 是 用 SSE 注释 来 显示 伪造 数据 刚好 以 和 真实 时 间 流 逝 
一 样 的 节奏 吐出 。 你 还 会 发 现 fx_client.basic.adjusting.html 和 fx_client.basic.adjusting123. 
html， 前 者 与 fx_server.adjusting_with_datestamp.php 相连 (该 版 本 显示 了 所 选 的 随机 种 
子 )， 后 者 设置 了 一 个 显 式 的 随机 种 子 ， 因 此 在 每 次 重 载 时 都 能 显示 可 复 现 的 数据 。 


<?php 





include_once("fxpair.milliseconds.php"); 


header("Content-Type: text/event-stream"); 


$symbols = array( 
new FXPair( “EUR/USD” 
new FXPair( ‘EUR/USD’ 
new FXPair( ‘USD/JPY’ 
new FXPair( ‘AUD/GBP’ 
); 

$clock = microtime(true); 

if (isset($argc) && S$argc 
$t = $argv[1]; 

elseif (array_key_exists( 


St = $_REQUEST[ ‘seed’ 


else { 
St = $clock; 


1.3030, 0.0001, 5, 360, 47)，, 
1.3030，0.0001，5，360，47) ， 
95.10, 0.01, 3, 341; 55), 

1.455, 0.0002, 5, 319, 39), 


vv vv vv 


>= 2) 


‘seed’” ,$ _ REQUEST)) 
J; 


echo "data:{\"seed\":$t}\n\n"; 


} 
mt_srand($t * 1000); 


while (true) { 


$sleepSecs = mt_rand(250, 500) / 1000.0; 
$now = microtime(true); 


$adjustment = Snow - 


usleep(($sleepSecs - 
St += $sleepSecs; 
$clock += $sleepSecs; 


$clock; 


$adjustment) * 1000000); 


$ix = mt_rand(0, count($symbols) - 1); 
$d = $symbols[$ix]->generate($t); 
echo "data:" . json_encode($d) . "\n\n"; 


@ob_flush(); @flush(); 


} 


3.8 ”本 章 内 容 盘 点 


本 章 讨论 的 范围 很 广 。 结 合 易 测 性 设计 原则 ， 我 们 一 步 一 步 地 设计 了 一 个 提供 随机 数据 
的 后 端 (同时 也 了 解 了 外 汇市 场 是 如 何 运 作 的 )， 然 后 用 SSE 把 数据 推送 到 客户 端 。 但 























我 们 推进 得 太 快 了 ， 所 以 下 一 章 的 开头 会 做 一 些 重 构 ， 然 后 增加 一 些 关 于 数据 存储 特性 的 


内 容 。 





第 4 章 


别 安 于 现状 





现在 已 经 做 得 很 好 了 ， 我 们 有 一 个 相当 复杂 但 又 相对 易 测 的 服务 端 ， 还 有 一 个 可 以 看 到 其 
工作 的 基础 前 端 。 也 差不多 到 了 该 恢复 平衡 、 优 化 前 端的 时 修了， 但 在 把 注意 力 转移 到 前 
端 之 前 ， 还 需要 在 后 端 上 做 些 改变 : 修改 数据 结构 ， 并 因此 不 再 兼容 之 前 见 过 的 那些 fx_ 
client.basic.*.html 文件 。 


4.1 数据 的 更 多 构成 


现在 一 条 数据 就 一 项 JSON 记录 ,要 做 的 主要 修改 就 是 允许 传输 多 行 数据 , 同时 还 有 两 个 请 
求 头 ”字段 : 一 个 是 外 汇 对 的 名 称 ， 一 个 是 服务 器 时 间 惟 。 所 以 ， 数 据 结 构 会 变 成 这 样 














symbol:string 
timestamp:string ("YYYY-MM-DD HH:MM:SS.sss") 
rows:array 


并 且 rows 里 的 每 一 项 数据 都 是 这 样 的 结构 : 
timestamp:string ("YYYY-MM-DD HH:MM:SS.sss") 


bid:double 
ask:double 














为 什么 要 做 这 些 ? 一 个 理由 是 为 可 能 需要 发 送 数 组 数据 (比如 ， 支 持 历史 数据 请 求 ) 做 好 
准备 。 当 然 ， 可 以 把 每 一 行 数据 作为 一 行 单独 的 JSON 数据 发 送 ， 这 样 会 使 数据 量 增 加 几 
字 节 ， 可 能 是 每 行 增加 12 字 节 。 更 好 的 理由 是 可 以 告诉 客户 端 这 是 一 个 逻辑 块 ， 现 在 服 
务 端 每 发 送 一 条 SSE 消息 ， 事 件 回调 函数 就 会 被 调用 一 次 ， 应 用 可 能 就 要 更 新 一 次 视图 。 
如 果 把 几 百 行 的 数据 放 到 一 个 块 里 发 送 ， 客 户 端 就 可 以 把 它们 作为 一 个 数据 块 进行 处 理 ， 
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然后 只 需 在 处 理 完 之 后 更 新 一 次 视图 。 
男 一 个 理由 是 这 样 更 灵活 ， 可 以 新 增 一 种 类 型 字段 ， 改 变 rows 的 含义 ， 比 妇 





0 增加 一 个 字段 


说 明 它 是 GZIP 压缩 过 的 CSV 格式 的 数据 ， 而 不 是 JSON 数组 ， 还 可 以 增加 一 个 版 本 号 字 


段 ， 谁 知道 我 们 将 来 还 想 干 嘛 呢 ? 、 














说 了 这 么 多 ， 代 码 要 做 的 改动 其 实 很 小 ， 只 会 影响 FXPair 类 中 的 generate() 方法 。 相 对 
于 fxpair.milliseconds.php，fxpair.structured.php 中 generate( ) 方法 的 第 二 部 分 像 下 面 这 样 : 


$ts = gmdate("Y-m-d H:i:s", $t) . sprintf(".%03d", ($t*1000)%1000); 
return array( 
"symbol" => $this->symbol, 
"timestamp" => Sts， 
"rows" => array( 
array( 
"timestamp" => 9Sts， 
"bid" => number_format($bid, $this->decimal_places), 
"ask" => number_format($ask, $this->decimal_places), 

















在 PHP 中 ， 一 个 含有 带 名 称 的 键 的 数组 称 为 关联 数组 ， 相 当 于 JSON 格式 的 





对 象 。 没 有 和 键 (就 像 上 面 的 代码 那样 ) 或 有 数值 型 键 的 数组 ， 相 当 于 JSON 


格式 的 数组 。 


注意 ， 数 据 的 时 间 惟 和 消息 的 时 间 靳 设 成 一 样 的 了 ， 但 它们 并 不 必须 是 一 相 


FE 的， 数据 行 里 





的 时 间 戳 应 该 来 自 证 券 交 易 所 并 且 有 官方 的 交易 时 间 惟 ， 所 以 它 可 能 比 消息 的 时 间 改 早 几 

















毫秒 ， 如 有 果 是 历史 数据 ， 那 可 能 早 几 个 月 甚至 几 年 。 


4.2 重 构 PHP 


PHP 代码 不 超过 40 行 ， 所 以 真 的 没有 多 少 要 重 构 的 。 但 我 敢 打 赌 ， 你 一 
下 面 这 段 代码 一 定 会 觉得 牙根 痒痒 : 




















$d = $symbols[$ix]->generate($t); 
echo "data:".json_encode($d)."\n\n"; 
@ob_flush();@flush(); 


所 以 我 把 它 改 成 这 样 : 





sendData($symbols[$ix]->generate($t)); 





注 1: 我 们 之 前 已 经 这 样 做 了 ， 以 一 种 临时 的 方式 ， 即 把 所 选 的 seed 放 到 发 送 的 SSE 消息 中 。 





过 又 一 遍地 看 到 


中 
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sendData0 的 实现 很 简单 ; 


function sendData($data){ 
echo "data:"; 

echo json_encode($data)."\n"; 
echo "\n"; 
@flush();@ob_flush(); 

} 


( 拆 分 成 3 个 echo 语句 真 的 不 是 为 了 遵循 本 书 的 格式 规范 ， 这 是 为 第 6 章 将 要 进行 ee 
做 准备 。 提 示 一 下 : 中 间 那 一 行 才 是 真正 的 数据 ， 而 “data:” 前 组 和 额外 的 换行 符 是 SSE 
协议 规范 所 要 求 的 。) 

可 以 在 本 书 源码 文件 fx_server.structured.php 中 看 到 这 段 修改 ， 其 他 修改 只 是 把 包含 fxpair. 
milliseconds.php 替换 成 包含 fxpair.structured.php。 





4.3 重 构 JavaScript 


现在 的 JavaScript 一 共 6 行 ， 但 进一步 看 ， 整 理 一 下 代码 结构 是 有 好 处 的 ， 这 里 所 做 的 一 
些 设计 策略 也 是 为 兼容 旧版 浏览 器 做 铺垫 。 


首先 定义 两 个 全 局 变量 : 

















var url = "fx_server.structured.php?"; 
var es = null; 


为 什么 在 URL 的 末尾 放 一 个 问号 ? 后 面 需要 在 URL 后 追加 一 些 参数 ， 这 
样 的 话 在 追加 参数 时 不 需要 知道 所 追加 的 是 URL 的 第 一 个 参数 (前 级 必须 
是 ?) 还 是 之 后 的 (以 & 为 前 级 )。 





现在 把 创建 EventSource 对 象 的 代码 放 在 startEventSource() 函数 中 ， 如 下 所 示 : 


function startEventSource(){ 

if(es)es.close(); 

es = new EventSource(url); 

es.addEventListener("message", function(e){processOnelLine(e.data);}, false); 
es.addEventListener("error", handleError, false); 


上 
下 一 写 handleError 国 数 ， 现 在 就 这 么 写 吧 : 
function handleError(e){} 


接 下 来 把 startEventSource() 的 调用 封装 到 connect 函数 中 ， 如 下 所 示 : 





function connect(){ 
if(window.EventSource)startEventSource(); 


// 否则 在 这 里 处 理 向 后 兼容 
} 





你 可 能 听 说 过 这 名 话 : 程序 设计 中 的 任何 问题 都 可 以 通过 增加 一 个 中 间 层 来 解决 。 好 吧 ， 
显然 我 们 在 增加 一 个 抽象 层 ， 那 么 我 们 要 解决 的 问题 是 什么 呢 ? 还 是 为 向 后 兼容 : 所 有 连 
接 技术 (比如 长 连接 ) 相关 的 代码 都 会 放 到 connect() 里 ， 也 包括 对 应 选 技术 的 检测 。 使 
用 SSE 的 特定 代码 放 在 startEventSource() 里 。 














要 让 一 切 运 转 起 来 ， 可 在 页 面 加 载 完 成 时 立即 调用 connect()， 最 简单 的 方式 就 是 把 下 面 
这 上段 代码 包 在 一 对 <script> 标签 中 ， 然 后 放 在 页 面 底部 : 














setTimeout(connect, 100); 





如 果 你 用 jQuery， 也 许 更 熟悉 下 面 的 方式 〈 而 且 可 以 把 这 段 代码 放 在 任何 地 方 ， 不 是 必须 
要 放 在 底部 ) : 














$s(function(){ setTimeout(connect, 100); }); 


我 们 用 了 一 个 0.1 秒 的 延 时 因为 有 些 版 本 的 浏览 器 需要 这 样 。 比 如 ，Safari 的 
某 些 版 本 ， 如 果 不 用 延 时 ， 你 可 能 会 看 到 “加 载 菊花 ”一 直 在 转 呀 转 ， 我 讨 
厌 100 毫秒 这 个 “魔法 数字 ”， 但 它 确实 有 用 。 


























接 下 来 的 重 构 是 把 数据 处 理 放 到 一 个 专门 的 函数 processOneLine(s) 中 ， 它 接收 单行 JSON 
字符 串 作 为 参数 ， 





function processOneLine(s) { 

var d = JSON.parse(s); 

if (d.seed) { 
var x = document.getElementById("seed"); 
x.innerHTML += "seed=" + d.seed; 


} 
else if (d.symbol) { 
var x = document.getElementById(d.symbol); 
for (var ix in d.rows) { 
var rr = d.rows[ix]; 
x.innerHTML = r.bid; 
} 
} 
} 


这 个 函数 也 展示 了 如 何 处 理 上 一 节 描 述 的 JSON 格式 的 变化 。 这 里 用 一 个 循环 来 展示 如 何 
处 理 数据 的 每 一 行 ， 在 这 里 ， 每 一 行 都 更 新 则 一 个 div， 所 以 ， 实 际 上 只 有 最 后 一 行 数据 
有 用 。 但 大 多 数 时 候 你 会 关心 所 有 数据 ， 并 且 想 要 一 个 循环 。 











看 看 做 了 这 些 重 构 的 fx_client.basic.structured.html 文件 ， 它 和 之 前 的 版 本 (fx_client.basic. 
adjusting.html) 功能 完全 一 样 ， 这 是 所 有 良好 重 构 的 目标 。 绝 不 要 将 重 构 和 新 增 功能 混在 
一 起 做 。 




















顺便 说 一 下 ， 如 果真 的 只 需要 最 后 一 行 数据 ， 上 面 那 一 段 代 码 可 以 改 成 这 样 : 


var x = document.getELementById(d.symbolL ); 
x.innerHTML = d.rows[ d.rows.Length - 1 ].bid; 


能 这 样 做 是 因为 d.rows 是 一 个 数组 ， 不 是 一 个 对 象 。 如 有 果 d.rows 是 对 象 〈 比 如， 以 时 间 
惟 为 键 )， 就 只 能 用 循环 。 说 起 这 个 ， 因 为 d.rows 是 一 个 数组 ， 所 以 也 可 以 这 样 写 主 循环 : 











for (var ix = 0; ix < d.rows.Length; ++ix) { 
var r = d.rows[ix]; 
x.innerHTML = r.bid; 


} 


4.4 历史 数据 存储 

在 我 们 的 应 用 中 ， 得 到 数据 当即 就 用 ， 然 后 就 天 了。 如 果 把 按 收 到 的 数据 都 保存 下 来 ， 那 
我 们 就 可 以 做 更 多 事情 ， 比 如 ， 可 以 把 最 后 $ 分 钟 或 者 24 小 时 的 数据 做 成 一 个 表格 ， 或 
者 做 成 一 个 图 表 。 


























我 们 从 添加 这 个 全 局 变量 开始 ， 它 用 于 保存 所 有 外 汇 对 历史 数据 : 
var fullHistory = {}; 


这 是 一 个 JavaScript 对 象 ， 但 是 会 被 当成 一 个 关联 数组 (也 叫 上 映射、 字典 、 散 列 、 键 值 
对 存储 ) 来 用 。 以 外 汇 对 的 名 称 作 键 ， 值 又 是 一 个 关联 数组 。 当 接收 到 一 行 数据 〈 一 条 
JSON 字符 串 ， 包 含 了 一 行 或 更 多 行 数据 ) ， 如 下 所 示 : 





if(!fullHistory.hasOwnProperty(d.symbol)) 
fullHistory[d.symbol] = {}; 





当 某 一 个 外 汇 对 名 称 (d.symbol) 第 一 次 出 现时 ， 先 为 它 创建 一 个 JavaScript 空 对 象 ， 然 
后 ， 像 下 面 这 样 来 填充 这 个 对 象 ; 




















for (var ix in d.rows) { 
var rr = d.rows[ix]; 
fuLLHtistory[d.symboL][r.key] = r.value; 


这 段 代码 片段 里 假定 每 一 行 数据 都 有 key 字段 和 value 字段 。 在 我 们 的 代码 里 r.timestamp 
是 键 ， 值 是 一 个 有 两 个 值 的 数组 [r.bid,r.ask]。 所 以 ， 新 的 processOneLine(s) 函数 的 完 
整 代 码 是 : 





function processOneLine(s) { 

var d = JSON.parse(s); 

if (d.seed) { 
var x = document.getElementById("seed"); 
x.innerHTML += "seed=" + d.seed; 


} 
else if (d.symbol) { 
if (!fullHistory.hasOwnProperty(d.symbol))fullHistory[d.symbol] = {}; 
var x = document.getElementById(d.symbol); 
for (var ix in d.rows) { 
var rr = d.rows[ix]; 
x.innerHTML = d.rows[ix].bid; 
fullHistory[d.symboll][r.timestamp] = [r.bid, r.ask]; 
} 
update_history_table(d.symbol); 
} 
} 


如 果 想 要 用 一 个 HTML 表格 显示 历史 记录 中 某 一 个 外 汇 对 最 近 的 10 条 数据 ， 该 怎么 做 
呢 ? 下 面 是 为 一 个 外 汇 对 创建 表格 的 函数 : 

















function makeHistoryTbody(history) { 
var tbody = document.createElement("tbody"); 
var keys = Object.keys(history).sort().slice(-10).reverse(); 


var timestamp, v, row, cell; 

for (var Nn = 0; n < keys.length; n++) { 
timestamp = keys[n]; 
v = history[timestamp]; 
row = document.createElement("tr"); 
cell = document.createElement("th"); 
cell.appendChild(document.createTextNode(timestamp)); 
row.appendChild(cell); 
cell = document.createElement("td"); 
cell.appendChild(document.createTextNode(v[0])); 
row.appendChild(cell); 
cell = document.createElement("td"); 
cell.appendChild(document.createTextNode(v[1])); 
row.appendChild(cell); 
tbody.appendChild(row); 
} 

return tbody; 


} 


这 里 创建 了 一 个 HTML DOM tbody 对 象 ， 然 后 抓 取 了 最 近 10 条 数据 的 键 (最 后 的 reverse() 
函数 使 最 新 的 数据 显示 在 表格 的 最 上 面 一 行 ) 到 一 个 数组 ， 然 后 遍历 这 个 数组 ， 循 环 地 创建 
表格 行 ， 并 给 这 一 行 创建 3 个 单元 格 ， 然 后 把 这 一 行 附加 到 前 面 创建 的 tbody 上 。 


最 后 一 步 是 把 当前 显示 的 tbody 禁 换 成 新 创建 的 ， 函 数 代 码 如 下 : 



































function updateHistoryTable(symbol) { 
var tbody = makeHistoryTbody(fullHistory[symbol]); 
var x = document.getElementById("history_" + symbol); 





x.parentNode.replaceChild(tbody, x); 
tbody.id = x lid; 
} 


最 后 一 个 文件 ，fx_client.history.html， 用 了 一 些 CSS 和 一 些 响 应 式 网 页 设计 原则 ， 所 以 页 
面 很 好 看 ， 而 且 在 桌面 和 移动 浏览 器 上 都 能 合理 地 布局 。 图 4-1 至 图 4-3 分 别 展 示 了 页 面 
在 刚 加 载 完 ， 运行 几 秒 之 后 和 运行 一 段 时 间 之 后 的 样子 。 
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USD/JPY EUR/USD AUD/GBP 


图 4-1: fx_client.history.html， 刚 刚 开 始 

















ee EEC 本 TO 
| 94.550 [ 1.30096 | 1.43697| 

















图 4-2: fx_client.history.html， 运 行 大 约 5 秒 后 








ep | uspipv | eurusp | aup/esr | 
| 94.041 | 1.30388 | 1.44424| 
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图 4-3: fx_client.history.html， 运 行 一 段 时 间 后 








我 不 打算 去 探究 CVS 和 网 页 设计 ， 那 偏离 了 本 书 主题 ， 来 看 一 下 其 中 的 一 个 表格 : 


<table class="price-table"> 
<caption>USD/JPY</caption> 
<thead> 
<tr> 
<th>Timestamp</th> 
<th>Bid</th> 
<th>Ask</th> 
二 /FS 
</thead> 
<tbody id="history_USD/JPY"></tbody> 
</table> 


每 个 表格 都 有 一 个 静态 的 标题 栏 和 表 头 ， 给 tbody 设置 一 个 id， 这 样 能 找到 它 并 且 只 替换 
表格 的 那 部 分 。 








所 有 支持 SSE 的 浏览 器 都 支持 0bject.keys， 所 以 makeHistoryTbody() 中 没 
问题 。 但 实现 向 后 兼容 时 ， 需 要 对 IE8 以 及 更 早 : 版 本 做 兼容 ， 后 面 第 一 次 
需要 它 时 会 介绍 这 种 兼容 。 注 意 ， 这 种 兼容 在 效率 上 会 慢 一 些 : 它 是 一 个 复 
杂 度 为 O(n) 的 算法 (n 是 键 的 数量 ) ， 而 原生 的 0bject.keys 复杂 度 是 0(1)。 








最 后 提醒 一 下 ， 当 你 看 到 这 个 页 面 努 力 地 忙 着 更 新 着 自己 时 ， 别 忘 了 我 们 只 是 故意 让 它 只 
显示 每 个 外 汇 对 的 最 近 10 条 问 价 /报价 ， 但 我 们 把 所 有 接收 到 的 癌 /报价 都 存储 在 内 存 
中 ， 你 需要 在 功能 性 和 客户 端 资 源 (这 里 是 指 可 用 的 内 存 ) 之 间 做 一 个 权衡 。 如 果 你 确信 
并 不 需要 全 部 数据 ， 考 虑 一 下 定期 裁剪 fullHistory 对 象 。 


4.5 永久 存储 


前 面 一 市 介绍 了 如 何 存储 所 有 接收 到 的 数据 ， 这 开启 了 一 个 充满 可 能 的 世界 表格， 实时 
图 表 ， 运 用 最 新 机 器 学 习 技术 进行 的 客户 端 侧 数据 分 析 等 。 你 可 以 依靠 浏览 器 把 握 市 场 的 
脉搏 ， 但 你 只 要 关 了 它 ， 也 就 意味 着 所 有 已 经 下 载 的 数据 、 计 算 结 有 果 ， 统 统 不 见 了 。 


让 HTML5 来 救 场 吧 ! 事实 上， 我 们 有 选择 ， 但 是 ,文件 系统 (Fitesystem) 还 没有 被 广 
泛 支 持 ， 索 引 数据 库 (IndexedDB) 也 是 如 此 (虽然 有 一 种 兼容 方案 可 以 让 它 的 支持 更 多 
一 点 ) ， 所 以 我 们 选择 了 Web 存储 。 这 些 新 的 HTML5 存储 API 共同 的 限制 是 必须 得 到 用 
户 同意 ， 并 且 存 储 空间 是 按 域 分 配 的 ， 第 9 章 会 介绍 域 的 确切 定义 ， 大 概 意思 就 是 http:/ 
example.com/ 上 运行 的 应 用 ， 不 能 访问 http://other.site/ 上 运行 的 应 用 创建 的 数据 。 





























一 








Web 存储 更 常见 的 叫 法 是 localStorage， 人 允许 存储 名 / 值 对 数据 ,通常 浏览 器 会 给 一 个 应 
用 提供 5 MB 的 存储 空间 ， 最 赞 的 是 几乎 所 有 六 览 器 都 支持 Web 存储 : IE8 以 上 版 本 (有 
IEG/IE7 的 兼容 方案 )、Firefox 3.5 以 上 版 本 、Chrome、Safari 4 以 上 版 本 、Android 2.1 以 上 
版 本 ， 以 及 Opera 10.5 以 上 版 本 (参见 http:Wcaniuse.com/namevalue-storage ) 。 
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Web 存储 的 缺点 是 它 不 能 存储 结构 化 的 数据 ， 只 能 是 
录 数 据 必须 用 JSON.stringify() 转化 为 字符 串 ， 这 有 
象 之 间 的 转化 还 会 有 内 存 和 CPU 时 间 方面 的 开销 。 


字符 串 ， 这 意味 着 前 文 提 到 的 历史 记 
点 低 效 ， 如 果 数 据 量 大 ， 字 符 串 和 对 














使 用 Web 存储 的 代码 很 简单 ， 只 需 对 现 有 代码 进行 两 处 修改 。 首 先 ， 要 保存 数据 ， 把 这 一 
行 插 到 processOneLine(s) 中 : 








function processOneLine(s){ 
var d = JSON.parse(s); 


else if(d.symboL){ 
if(!fullHistory.hasOwnProperty(d.symbol))fullHistory[d.symbol] ={}; 


updateHistoryTable(d.symbol); 
localStorage.fullHistory = JSON.stringify(fullHistory); 


} 
是 的 ， 就 这 么 简单 。]SON.stringify() 把 fullHistory 对 象 转 化 成 字符 串 ， 对 localStorage. 


XXX 赋值 既 可 以 创建 一 个 XXX 键 ， 也 可 以 替换 它 ， 也 可 以 这 样 写 ;LocalStorage， 
setItem("fullHistory", JSON.stringify(fullHistory));, 











注意 这 里 在 发 生 什么 : 每 次 有 数据 传 过 来 ， 整 个 历史 记录 数据 就 被 转化 成 字符 串 ， 替 换 原 
来 的 值 。 在 我 的 测试 里 ，Firefox 上 运行 了 大 约 一 个 小 时 后 ， 占 用 了 25% 的 CPU 资源 ( 刚 
开始 的 时 候 是 4%)， 字 符 串 大 小 达到 了 500 KB ， 虽 然 这 还 不 是 很 要 命 ， 但 再 运行 几 个 小 
时 就 会 了 。 








优化 
有 两 种 可 能 的 优化 ， 可 以 用 外 汇 对 把 数据 分 割 ， 存 储 历 史记 录 的 代码 就 会 变 成 这 样 : 


localStorage.setItem("fullHistory." + d.symbol, 
JSON.stringify( fullHistory [d.symboL]) ); 


我 们 有 3 个 外 汇 对 ， 这 意味 着 分 割 之 后 每 个 字符 事 大 小 是 原来 的 1/3， 这 在 性 能 上 的 
收益 是 ， 如 果 原 来 发 生 故 障 的 时 间 是 4 小 时 后 ， 那 现在 是 12 小 时 后 。 把 这 个 思路 迁 
伸 一 下 ， 还 可 以 把 时 间 玲 的 一 部 分 用 在 键 名 中 。 比 如， 可 以 把 每 个 小 时 的 数据 归 到 
一 组 。 这 确实 增加 了 一 点 复杂 度 ， 因 为 现在 需要 额外 的 localStorage 条 目 来 记录 数 
据 的 所 属 时 段 (替代 方案 是 ，localStorage API 提供 了 一 种 遍历 全 部 存储 数据 的 方式 : 


for(var ix = 0; ix < localStorage.length; ix++){var key = LocaLStorage.key(i); ... }), 


另 一 种 优化 方案 是 用 setInterval 每 陪 30 秒 保存 一 次 数据 ， 而 不 是 每 次 获得 数据 的 时 
候 。 这 显著 地 降低 了 CPU 的 使 用 ， 但 请 注意 ， 在 运行 了 一 段 时 间 之 后 ，CPU 的 占用 
还 是 会 达到 100%， 只 是 不 会 一 直 100%， 而 是 每 30 秒 爆发 一 次 ; 另 一 件 需 要 注意 的 
事 是 ， 关 闭 浏览 器 时 ， 在 上 一 次 保存 之 后 传 过 来 的 数据 会 丢失 。 
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代码 需要 做 的 另 一 个 修改 是 使 用 永久 存储 的 数据 ， 在 connect() 的 最 上 面 加 上 下 面 几 行 : 











function connect() { 

if (localStorage.fullHistory) { 
fullHistory = JSON.parse(localStorage.fullHistory); 
updateHistoryTable("USD/JPY"); 
updateHistoryTable("EUR/USD"); 
updateHistoryTable("AUD/GBP"); 


if (window.EventSource)startEventSource( ) ; 


// 否则 在 这 里 处 理 向 后 兼容 
} 


这 就 是 简单 地 把 数据 保存 的 过 程 反 过 来 ， 用 JSON.parse 取代 JSON.stringify， 也 可 以 写成 
fullHistory = JSON.parse(localStorage.getIitem("fullHistory"));, 





代码 中 其 他 3 行 是 用 之 前 保存 的 数据 更 新 视图 。 





如 果 它 不 生效 ， 检 查 一 下 你 的 浏览 器 设置 ， 有 些 浏 览 器 的 安全 策略 设置 是 存放 在 cookie 中 
的 ， 所 以 你 可 能 也 需要 允许 存储 cookie。 如 果 你 点 击 浏 览 器 的 刷新 按钮 时 有 效 ， 关 闭 所 有 
浏览 器 窗口 再 打开 却 无 效 ， 检 查 一 下 浏览 器 的 安全 策略 设置 ， 看 其 中 是 否 有 一 项 是 当 浏 览 
器 会 话 结 束 时 删除 所 有 cookie。 








要 删除 数据 很 简单 ， 只 要 调用 localStorage.removeltem('fullHistory');。 
如 果 你 按 补 充 内 容 “ 优 化 ”中 提 到 的 方案 实现 了 按 小 时 分 组 数据 ， 那 你 可 以 
用 前 面 那 名 代码 删除 最 老 的 数据 。 




















能 存储 多 少数 据 ? 这 取决 于 浏览 器 ， 但 通常 可 以 达到 5 MB (足够 让 我 们 的 FX 示例 应 用 
运行 11~12 小 时 )。 当 达到 存储 限制 会 怎么 样 ? 一 般 情况 下 会 导致 setItem() 的 调用 失败 ， 
抛 出 一 个 可 以 捕获 处 理 的 QUOTA_EXCEEDED_ERR 异常 ， 传 入 setItem() 的 key 原来 的 数据 
依然 保留 。Opera 浏览 器 会 先 弹 出 一 个 对 话 框 ， 询 问 用 户 是 否 人 允许 提供 更 多 存储 空间 。 在 
Firefox 中 ， 用 户 可 以 通过 修改 dom.storage.default_quota (在 about:config 中 ) 的 值 来 
调整 存储 空间 大 小 (在 about:config 中 )。 












































如 何 减少 数据 大 小 


一 种 思路 是 在 存储 之 前 压缩 JSON 字符 囊 ， 可 以 在 网 上 搜 到 zip、gzip 和 LZW 的 
JavaScript 实现 ，JSON 很 好 压缩 。 








注 2: LZW (Lempel-Ziv-Welch) 是 Abraham Lempel，Jacob Ziv 与 Terry Welch 提出 的 一 种 无 损 压 缩 算 法 。 
一 一 译 者 注 
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你 也 可 以 尝试 对 数据 进行 总 结 提 炼 后 再 存储 ， 而 不 是 直接 存储 原始 数据 。 这 是 有 损 压 
缩 ， 而 不 是 前 文中 推荐 的 无 损 压 缩 。 比 如 ， 在 金融 类 应 用 中 ,很 普遍 的 做 法 是 把 原始 
的 离散 型 数据 转变 成 连续 型 数据 ， 一 个 一 分 钟 的 连续 数据 只 要 存储 开盘 价格 、 收 意 价 
格 、 最 高 价格 、 最 低 价 格 ， 以 及 这 一 分 钟 里 的 离散 数据 量 ; 规划 合理 的 话 你 所 需 的 存 
储 空间 几乎 保持 不 变 。 比 如 ， 你 可 以 存储 10 分 钟 内 的 原始 数据 ，2 小 时 内 的 一 分 钟 连 
续 数 型 数据 ，1 星期 内 的 一 小 时 连续 型 数据 ， 以 及 几 年 内 的 一 天 连续 型 数据 。 








4.6 现在 我 们 是 历史 学 家 


本 章 首先 优化 了 第 3 章 的 代码 结构 ， 然 后 在 此 基础 上 介绍 了 如 何 存储 历史 数据 ， 以 及 展示 
最 新 数据 和 一 段 历史 数据 ， 然后 介绍 了 如 何 把 这 个 和 Web 存储 技术 结合 起 来 ， 这 样 客户 端 
能 有 一 个 永久 的 数据 缓存 。 现 在 已 经 完成 了 特性 开发 ， 下 一 章 全 部 是 关于 如 何 使 应 用 具备 
产品 级 品质 。 
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走出 象 直 塔 ， 打 造 产品 级 品质 





前 面 两 章 创建 了 一 个 推送 多 个 外 EN ， 以 及 一 个 在 支持 SSE 的 浏览 器 上 展示 的 
前 端 。 这 个 应 用 通过 以 下 方式 来 改进 : 让 它 能 在 不 支持 SSE 的 旧版 浏览 器 及 移动 浏览 器 上 
运行 。 但 还 有 一 个 重要 的 地 方 需要 改进 ， 因 为 此 时 此 刻 我 依然 认为 这 只 是 个 简陋 的 范例 ， 
它 还 没有 达到 产品 级 品质 。 
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产品 级 品质 是 什么 意思 呢 ? 它 包 括 以 下 几 点 : 当 出 现 错误 时 系统 能 自动 修复 ， 能 适应 现实 
世界 的 各 种 限制 (本章 会 介绍 如 何 处 理 外 汇市 场 周末 歇业 的 场景 )， 能 够 应 对 服务 端 发 送 
错误 数据 的 情况 。 


5.1 错误 处 理 

在 第 4 章 中 ， 我 们 给 error 事件 绑 定 了 事件 处 理 程序 ， 并 将 国 数 命名 为 handleError。 现 在 
需要 确定 国 数 里 面 怎么 写 。 本 章 的 末尾 会 在 客户 世 器 做 自动 重 连 功能 ， 任何 时 候 后 端 服务 断 
开 ， 客 户 端 都 会 自动 重 连 。 即 便 后 端 不 可 用 ， 也 会 一 直 党 试 连接 。 不 过 ， 做 这 些 和 有 没有 
error 事件 处 理 程序 无 关 。error 事件 处 理 程序 只 是 提供 信息 的 : 只 有 程序 员 关 心 这 一 点 ， 
而 用 户 并 不 关心 。 所 以 回调 函数 可 以 简单 写成 : 






































function handleError(e) { 
console. log(e); 


} 


说 “提供 信息 ”有 些 言 过 其 实 。 上 文 代码 中 的 e 对象 没有 消息 ， 没 有 错误 码 。 唯 一 有 
点 用 处 的 是 target 字段 。 它 是 触发 事件 的 EventSource 对 象 ， 可 以 从 中 找到 曾 连接 过 的 
URL， 以 及 一 个 readyState (完整 的 是 etarget.readyState) 字段 。 如 果 readyState 是 2 
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(或 者 e.target.CLOSED)， 即 意味 着 “关闭 ”， 意 味 着 URL 有 问题 ， 并 没有 成 功 建立 连接 ， 
如 果 readyState 是 0 (或 者 e.target.CONNECTING)， 意 思 是 “连接 中 ”， 意 味 着 之 前 建立 的 
连接 已 经 关闭 并 且 浏 览 器 在 尝试 自动 重 连 ， 如 果 readyState 是 1 (或 者 e.target.OPEN ) ， 
意味 着 已 成 功 建立 连接 。 

















5.2 ”错误 的 JSON 

如 果 服 务 端 发 送 的 字符 串 不 是 JSON 格式 的 ， 或 者 格式 有 问题 ( 少 了 一 个 逗号 或 换行 符 )， 
浏览 器 可 能 会 抛 出 异常 。 这 会 让 一 切 都 停止 运作 ， 这 很 糟糕 。 所 以 ， 只 写 一 句 var d = 
JSON.parse(s); 是 不 够 的 ， 达 到 产品 级 品质 要 这 样 写 : 





try { 
var d = JSON.parse(s); 

} catch(e){ 
console.log("BAD JSON:" + s+ "\n" + e); 
return; 


} 


5.3 长 连接 


有 时 我 会 一 走 几 个 星期 甚至 几 个 月 都 不 给 我 妈妈 打 个 电话 ， 但 她 怎么 知道 我 到 底 是 没事 要 
说 ， 还 是 手机 从 费 了 ， 还 是 被 流星 硬 了 躺 在 医院 里 呢 ? 所 以 ， 偶 尔 我 会 给 她 发 邮件 ， 告 诉 
她 “账单 都 付 清 了 ， 没 被 流星 砸 到 。” 或 者 更 简单 :“ 我 还 活着 。” 


在 网 络 术语 里 ， 长 连接 是 每 N 秒 发 送 的 一 个 数据 包 ， 或 者 在 一 个 套 接 字 失 活 N 秒 后 ， 告 
诉 套 接 字 的 另 一 头 一 切 正常 并 且 没 有 什么 需要 通信 的 。( 有 时 会 看 到 这 个 概念 被 称 为 心 
跳 )。 有 些 浏览 器 可 能 会 断 开 连 接 ， 并 在 套 接 字 失 活 一 段 时 间 后 关闭 重 连 。 另 外 ， 代 理 服 
务 器 会 在 一 个 连接 沉默 后 将 其 关闭 。 为 防止 这 种 情况 发 生 ， 我 们 在 应 用 中 每 15 秒 发 一 个 
长 连接 消息 。 为 什么 是 15 秒 ? SSE 协议 草案 提 到 了 这 个 数字 。 它 可 能 比 实际 所 需 的 频率 
要 快 一 些 ， 但 换个 角度 讲 ， 这 个 频率 也 还 不 至 于 成 为 系统 的 瓶颈 。 























所 以 ， 这 样 就 确定 了 N 的 值 。 接 下 来 要 做 的 设计 决策 是 : 是 每 15 秒 发 一 次 长 连接 消息 ， 
还 是 在 沉默 了 15 秒 后 发 送 。 这 不 是 很 重要 ， 你 看 在 服务 端 怎 么 编写 代码 最 简单 就 怎么 做 。 





























注意 ， 长 连接 会 影响 TCP/IP 带宽 控制 ， 尤 其 是 它 的 慢 启 动 重启 机 制 。 别 担心 ， 如 果 15 
秒 ，30 秒 或 者 90 秒 的 SSE 长 连接 对 网 络 负载 有 显著 影响 ， 可 能 是 因为 别 的 地 方 出 了 更 大 
的 问题 (给 初学 者 们 提 个 问题 ， 为 什么 有 这 么 多 没有 发 送 任何 实际 数据 的 SSE 连接 呢 ? ) 
配置 服务 器 不 使 用 慢 启 动 可 作为 灰 代 方案 (这 是 个 操作 系统 级 别 的 设置 ) 。 











在 移动 设备 上 ， 关 于 长 连接 还 有 一 些 别 的 注意 事项 。 比 如 ， 长 连接 可 能 会 阻止 应 用 进入 休 
卢 ， 因 此 会 加 快 设备 电量 消耗 。 如 果 数 据 更 新 频率 不 高 但 可 预测 ， 考 虑 一 下 用 setTimeout 
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来 获取 数据 ， 而 不 是 用 推送 。 


5.3.1 ”服务 器 端 
长 连接 可 以 简单 地 通过 发 送 SSE 注释 行 来 维持 。 怎 么 做 呢 ? 它 只 是 一 行 以 分 号 开始 的 代 
码 。 你 可 能 记得 3.7 节 中 我 们 用 SSE 注释 来 输出 一 些 问题 诊断 。 举 例如 下 : 


echo ":\n\n";@flush();@ob_flush(); 
我 们 还 可 以 发 一 个 空 数据 信息 : 
echo "data:\n\n";@flush();@ob_flush(); 


发 送 SSE 注释 行 和 发 送 SSE 数据 行 有 什么 区 别 呢 ? 在 服务 端 是 4 字 节 的 区 别 ， 但 在 客户 
端 那 就 是 天 壤 之 别 了 。 后 者 触发 了 Eventobject 的 消息 事件 处 理 程序 ， 而 前 者 没有 。 我 们 
想 要 后 者 ， 具 体 原因 会 在 后 面 讨论 客户 端 事件 处 理 时 谈 到 。 








发 送 实际 的 数据 包 时 ， 也 包含 一 个 时 间 改 〈 这 个 可 用 来 检测 服务 端 与 客户 端 时 间 是 不 同步 了 
还 是 高 延迟 )。 因 为 消息 是 JSON 格式 的 ， 所 以 指明 这 是 长 连接 消息 并 不 麻烦 ， 代 码 如 下 : 
sendData(array( 

"action" = > "keep-alive", 

"timestamp" = > gmdate("Y-m-d H:i:s") 

)); 
在 本 书 源码 的 低 _server.keepalive.php 文件 中 找到 使 用 这 段 代码 的 例子 。 因 为 本 书 的 应 用 是 
持续 不 断 地 发 送 数据 ， 永 远 不 会 有 15 秒 的 沉默 ， 所 以 永远 不 会 发 送 一 个 长 连接 。( 长 连接 
这 个 概念 对 这 个 应 用 基本 上 没什么 意义 。) 但 是 为 了 能 在 前 端 测 试 ， 这 里 用 了 定期 发 送 模 
式 ， 在 无 限 循环 主体 开始 之 前 初始 化 SnextKeepalive = time() + 15;， 简 单 地 说 ， 这 句 代 
码 的 意思 就 是 说 ， 发 送 下 一 个 长 连接 销 息 的 时 间 是 从 现在 开始 的 15 秒 以 后 ， 然 后 循环 主 
体 就 在 休眠 之 后 开始 执行 ， 刚 刚 在 一 次 休眠 之 后 ， 代 码 如 下 所 示 : 











while (true) { 


if (time() > $nextKeepalive) { 
sendData(array( 
"action" => "keep-alive", 
"timestamp" => gmdate("Y-m-d H:i:s") 
)); 


$nextKeepalive = time() + 15; 


$ix = mt_rand(0, count($symbols) - 1); 








注 1: 写作 本 书 时 ， 所 有 浏览 器 悄悄 吃 掉 了 SSE 注释 ， 所 以 你 甚至 在 开发 者 工具 中 都 看 不 到 它们 。 
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要 把 它 修改 为 只 在 沉默 期 后 发 送 ， 只 需 修 改 成 在 发 送 数据 后 运行 $nextKeepalive = time() 
+ 15; 即 可 。 





5.3.2 客户 端 

SSE 协议 已 经 包含 了 一 套 重 连 机 制 。 所 以 ， 我 们 并 不 是 一 定 需 要 用 长 连接 方案 ， 只 需 发 送 
一 个 SSE 注释 ( 见 上 一 节 所 述 ) 就 足够 保持 TCP/IP 套 接 字 连 接 。 如 果 套 接 字 死 掉 了 ， 浏 
览 器 会 自动 重 连 。 之 所 以 没有 依赖 这 套 重 连 机 制 ， 有 两 个 原因 ， 第 一 个 原因 是 只 有 套 接 字 
死 得 优雅 干脆 利落 时 浏览 器 才 会 重 连 ,就 像 动 作 电 影 里 的 群众 演员 一 样 。 但 是 ， 有 时候 大, 
接 字 死 得 像 动作 电影 里 的 英雄 一 样 。 就 像 电影 里 那样 ， 套 接 字 停止 工作 之 后 ， 训 览 器 可 能 
要 在 30 秒 、60 秒 甚 至 120 秒 后 才 确 定 它 死 把 了 。 后 端 代码 的 bug 会 引起 类 似 的 问题 。 第 
二 个 原因 很 合理 而 且 简 单 : 代码 要 适用 于 向 后 兼容 方案 ， 这 也 是 为 什么 长 连接 消息 要 像 普 
通 消 息 一 样 能 用 JavaScript 处 理 。 























首先 需要 定义 两 个 JavaScript 全 局 变量 : 


var keepaliveSecs = 20; 
var keepaliveTimer = null; 


第 一 个 变量 决定 了 灵敏 度 ， 一 个 合理 的 值 应 该 能 匹配 服务 端 发 送 长 连接 消息 的 时 间 间 隔 。 
现在 后 端的 间隔 是 15 秒 ， 考 虑 到 网 络 延 迟 和 其 他 可 能 在 前 后 端的 延迟 ， 这 里 加 了 一 点 熏 
余 ， 选 择 了 20 秒 这 个 值 。 




















keepaliveTimer 是 setTimer() 的 回调 函数 ， 这 个 计时 器 会 在 初始 化 连接 时 创建 。 然 后 ， 每 
次 有 数据 从 服务 端 过 来 ， 就 会 销毁 原来 的 计时 器 并 创建 一 个 新 的 。 所 以 ， 只 要 有 数据 (不 
论 是 真正 的 数据 还 是 长 连接 消息 ) 定期 传 过 来 ， 计 时 器 就 会 总 是 在 触发 之 前 被 销毁 。 只 
在 20 秒 内 没有 数据 传 过 来 时 ， 计 时 器 才 会 触发 。 这 说 明 某 个 地 方 出 了 问题 ， 因 为 客户 端 
本 该 每 15 秒 收 到 一 次 长 连接 消息 。 


这 部 分 代码 如 下 所 示 : 

















function gotActivity() { 
if (keepaliveTimer != null)clearTimeout(keepaliveTimer); 
keepaliveTimer = setTimeout(connect, keepaliveSecs * 1000); 


} 


setTimeout 的 第 二 个 参数 是 以 毫秒 为 单位 的 ， 因 此 keepaliveSecs 乘 以 1000。 第 一 个 参 
数 是 计时 结束 时 要 调用 的 函数 ， 所 以 当 没 有 接收 到 长 连接 时 就 会 调用 connect()。 还 记得 
connect() 函数 吧 ， 它 以 前 是 这 样 的 : 

function connect() { 

if (window.EventSource)startEventSource(); 


// 否则 在 这 里 处 理 向 后 兼容 
} 
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要 让 其 开始 运行 ， 只 需要 加 一 行 代码 ， 如 下 所 示 : 


function connect() { 

gotActivity(); 

if (window.EventSource)startEventSource(); 

// 否则 在 这 里 处 理 向 后 兼容 

下 
这 很 重要 ， 因 为 如 果 没 有 它 ， 当 连接 出 错时 (永远 不 会 发 任何 数据 ) 时 就 不 会 被 发 现 。 将 
gotActivity() 放 在 connect() 国 数 开 始 的 地 方 ， 是 为 了 防止 startEventSource() 抛 出 异 
常 ， 并 且 后 面 的 代码 不 会 被 执行 到 。 


为 什么 没有 在 connect() 中 销毁 旧 的 连接 ? 这 项 工作 留 给 了 startEventSource() (其 实 已 
经 做 了 处 理 ， 参 见 4.3 节 )。 在 不 同 的 向 后 兼容 方案 中 ， 其 销毁 连接 的 方式 是 不 同 的 。 


























最 后 ， 在 processOneLine(s) 的 最 上 面 ， 在 gotActivity() 上 添加 一 个 调用 : 





function processOneLine(s) { 
gotActivity(); 
var d = JSON.parse(s); 


这 与 它 是 否 是 一 个 长 连接 ， 是 否定 期 发 送 数 据 ， 以 及 其 他 东西 都 没关系 。 程 序 执行 
到 processOneLine(s) 表明 已 接收 到 消息 。 接 下 来 两 章 讨论 的 向 后 兼容 方案 中 也 会 用 到 
connect() 和 processOneLine(s)， 所 以 这 上 段 代 码 可 以 不 作 修 改 就 能 被 它们 用 于 支持 长 连接 。 
运行 一 下 fx_client.keepalive.html 看 看 实际 效果 。 图 5-1 显示 了 有 两 次 长 连接 传 过 来 的 
效果 。 











Reep alve2014 01-08 0 | useov | sugusp | AupseP | 
Keep-alive:2014-01-08 06:36:08 eo CE 
Keep-alive:2014-01-08 06:36:24 | 93.773 | 1.30943| 1.43612| 











USD/JPY EUR/USD AUD/GBP 














图 5-1: 运行 大 概 35 秒 后 的 fx_client.keepalive.html，fx_client.keepalive.html 收 到 两 次 长 连接 的 效果 
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另 一 种 做 长 连接 的 方法 
现在 的 长 连接 方案 是 每 次 获得 新 数据 时 就 销毁 原来 的 计时 器 ， 然 后 再 新 建 一 个 。 有 一 
种 替代 方案 是 只 记录 上 一 次 数据 的 时 间 堆 ， 然 后 可 能 需要 一 个 每 4 秒 跳动 一 次 的 计时 
器 。 每 次 计时 器 触发 ， 就 会 检查 一 下 距离 上 一 次 获取 数据 有 多 长 时 间 。 当 超过 20 秒 
时 ， 它 会 认为 服务 器 已 经 挂 了 ， 这 时 就 会 开始 重 连 。 


这 种 方式 有 一 些 缺 点 。 它 需要 再 定义 两 个 全 局 变量 (var keepaliveTimerSecs=4;，var 
lastTimestamp=null;) ; 需要 差不多 两 倍 的 代码 量 。 另 外 ， 它 还 不 及 现 方案 精确 ; 服 
务 器 出 问题 后 ， 前 闯 需 要 大 概 20 到 24 秒 才能 识别 到 。 前 文 所 述 的 方案 里 ， 可 以 刚好 
在 收 到 上 一 条 数据 的 20 秒 后 识别 到 。 


这 种 方案 一 定 是 有 优 执 的 ， 对 吧 ? 是 的 ， 在 每 次 收 到 数据 时 ， 更 新 一 个 时 间 戳 比 销 毁 
然后 重启 一 个 计时 器 要 快 。 这 个 额外 的 CPU 负载 有 些 无 足 轻 重 ， 只 有 当 陷 入 到 非常 迅 
猛 的 数据 爆发 ， 并 且 已 经 忙 得 不 可 开交 时 ， 这 个 额外 的 CPU 负载 才 会 出 现 。 谢 谢 你 问 
这 个 问题 。 

本 章 的 第 一 个 草案 中 ， 是 在 正文 里 介绍 这 种 方案 的 ， 而 更 简 版 本 则 是 在 附注 里 介绍 
的 。 可 是 ， 我 有 些 怀 疑 ， 所 以 就 去 测试 了 一 下 两 者 的 差异 。 在 Chrome (基于 WebKit/ 
PhantomJS) 中 ， 销 毁 重 建 计 时 器 方案 的 耗 时 是 更 新 时 间 玲 方案 耗 时 的 14~17 倍 。 在 
Firefox 中 ， 这 个 差异 更 大 ， 大 约 相 差 250~350 倍 ! 所 以 我 的 直觉 是 对 的 ， 其 感 欣 你 | 
然后 我 往 后 退 了 一 步 ， 进 行 了 一 次 微 优 化 。 以 每 秒 接收 100 条 消息 为 例 ， 这 可 以 算是 
很 快 的 数据 更 新 频率 了 。 测 试 表 明 100 次 销毁 一 重建 计时 器 耗 时 大 概 6 毫秒 ， 所 以 每 
秒 100 条 消息 相当 于 占用 了 0.6% 的 CPU 开销 。 


结论 : 销毁 一 重建 计时 器 的 长 连接 处 理 方 案 永远 不 会 成 为 性 能 瓶颈 。 











5.3.3 SSE 重 试 


SSE 有 内 置 的 保持 连接 机 制 。 它 是 怎样 工作 的 ? 代码 如 何 和 它 进行 交互 ? SSE 内 置 的 重 连 
机 制 是 在 套 接 字 层级 上 运作 的 ， 如 果 服 务 器 关闭 了 套 接 字 ， 浏 览 器 会 执行 如 下 几 步 。 





。 设置 readyState (EventSource 对 象 的 一 个 属性 ) 值 为 EventSource.CONNECTING。 
。 调用 error 事件 处 理 程序 (参见 5.1 节 )。 
。 等 待 retry 延 时 时 间 ， 然 后 重新 连接 。 











重 试 等 待 时 长 由 什么 决定 ?默认 是 由 浏览 器 决定 的 *， 大 约 3~5 秒 。 这 意味 着 如 果 连 接 
为 套 接 字 关 闭 而 断 开 ， 在 长 连接 代码 检测 到 之 前 ， 内 置 的 重 连 就 已 经 发 生 了 。 所 以 这 设 
么 冲突 ，SSE 重 连 会 处 理 一 切 ， 长 连接 重 连 代码 永远 不 会 用 上 。 


Ba 











一 








注 2: 写作 本 书 时 ,在 Chrome 和 Safari 中 是 3 秒 ( 参 见 WebKit 或 Blink 源 码 的 core/page/EventSource.cpp 文 件 )， 
在 Firefox 中 是 5 秒 (参见 Mozilla 源码 的 content/base/src/EventSource.cpp 文件 )。 














60 | 第 5 章 


既然 SSE 有 内 置 的 重 连 机 制 ， 为 什么 还 要 费劲 写 一 套 长 连接 机 制 ? 问 得 好 。 首 先 ， 在 接 下 
来 两 草 介 绍 的 向 后 兼容 方案 需要 它 ， 并 且 即 便 我 们 控制 了 生态 系统 ， 而 且 知 道 所 有 的 浏览 
器 都 能 支持 EventSource， 仍然 需要 这 段 代 码 。SSE 内 置 重 连 只 能 处 理 套 接 字 关闭 这 一 种 
引发 错误 的 情况 ， 而 其 他 导致 连接 出 错 的 情况 还 有 很 多 ， 可 能 套 接 字 死 挥 了 却 没有 被 检测 
到 ， 可 能 后 端 脚本 发 生 骨 溃 并 且 没 有 正常 地 关闭 套 接 字 ， 可 能 进入 了 死 循环 ， 可 能 训 览 器 
或 服务 器 出 现 了 bug。 幸 好， 我 们 这 个 显 式 的 长 连接 机 制 能 处 理 所 有 这 些 情况 ， 但 最 重要 
的 是 它 能 处 理 服 务 端 离线 的 情况 。 当 网 络 服务 无 法 访问 ,或 者 返回 404， 或 者 跨 域 配置 有 
问题 ，SSE 把 readystate 值 设 为 EventSource.CLOSED， 并 不 再 重 试 ， 而 显 式 长 连接 机 制 每 
20 秒 会 重 试 一 次 。 
































回 到 SSE 内 置 重 连 ， 默认 等 待 3~5 秒 确 实 很 短 。 如 果 服 务 器 可 能 会 经 常 关闭 连接 并 且 不 需 
要 进行 频繁 的 重 连 ， 可 以 把 重 连 时 间 设 大 一 点 。 相 反 ， 如 果 想 要 更 短 一 点 ， 以 减少 出 错 后 
的 故障 时 间 ， 可 以 设置 一 个 更 小 的 值 ”， 可 以 通过 在 SSE 消息 中 添加 下 面 这 一 行 来 修改 : 

















retry: 10000 


它 的 单位 是 毫秒 ， 所 以 10 000 意味 着 10 秒 。 建 议 不 要 将 这 个 值 设 成 大 于 发 送 长 连接 消息 
的 时 间 间 隔 。 比 如 ， 如 果 把 这 个 重 连 时 间 设置 为 20 000， 那 发 送 长 连接 的 时 间 间 隔 建议 设 
置 为 25~30 秒 (但 也 不 要 比重 连 时 间 大 大 多 ， 不 然 浏 览 器 、 代 理 服 务 器 等 中 转 媒 介 、 人 负载 
均衡 器 等 会 把 沉默 当成 丢失 连接 )。 请 记 住 ， 如 果 增 大 服务 端的 重 连 时 间 间 隔 ， 务 必 也 要 
增 大 JavaScript 中 的 keepaLiveSecs。 


























也 许 我 们 可 以 从 SSE 的 内 置 重 连 获得 灵感 ， 来 实现 一 套 我 们 自己 的 协议 ?这 样 服务 端 规定 
一 个 发 送 长 连接 的 频率 ， 然 后 自动 调整 与 之 匹配 的 keepalivesecs 的 值 。 这 是 个 非常 好 的 
想法 ， 当 服务 端 超载 ， 动 态 地 告知 客户 端 调 整 一 下 重 连 时 间 。 事 实 上 ， 如 果 把 发 送 长 连接 
消息 的 时 间 间 隔 设置 太 长 ， 浏 览 器 (或 者 中 转 媒 介 ) 会 认为 出 错 了 ， 并 关闭 套 接 字 ， 尝 试 
重 连 ， 这 样 整体 上 会 造成 更 多 负载 。 所 以 只 能 在 15~40 秒 这 个 范围 内 调整 重 连 时 间 。 这 个 
收益 不 高 ， 不 值得 为 此 把 它 弄 得 更 为 复杂 。 























本 书 的 源码 里 有 一 个 fx_server.retry.php 文件 ， 它 在 脚本 最 上 面 加 了 一 行 代码 ， 如 下 所 示 : 


header("Content-Type: text/event-stream"); 
echo "retry: 10000\n\n";@flush();@ob_flush(); 


怎么 测试 呢 ?” 这 个 脚本 包含 了 一 段 自 毁 语句 ! 在 无 限 循 环 的 顶部 ， 我 添加 了 如 下 代码 : 


while(true){ 
if(time() % 20) == 0)break; 





注 3: Firefox 强制 要 求 最 小 的 重 连 时 间 是 0.5 秒 。 
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在 每 一 分 钟 的 开始 ， 以 及 开始 后 的 20 秒 和 40 秒 之 后 ， 脚 本 会 悄悄 地 退出 。 这 个 退出 干净 
优雅 ， 所 以 浏览 器 能 立刻 识别 到 。 





销毁 的 方式 
另 一 种 测试 SSE 重 连 的 方式 是 关闭 服务 软件 。 比 如 在 Ubuntu 上 使 用 Apache， 只 输入 
sudo service apache2 restart 就 可 以 了 。 正 如 前 文 所 述 的 中 断 无 限 循环 的 方式 那样 ， 
这 也 是 一 种 干净 的 销毁 方式 : 浏览 器 几乎 能 立即 检测 到 套 接 字 已 经 销毁 。 
顺便 说 一 下 ，sudo service apache2 gracefutL 偶尔 也 正好 是 你 不 想 要 的 它 会 重 户 
所 有 闲置 的 Apache 实例 ， 但 SSE 进程 并 没有 闲置 ， 所 以 不 会 关闭 SSE 套 接 字 。 
脏 的 销毁 方式 是 怎样 的 呢 ? 
如 果 服 务 器 和 客户 芒 在 不 同 的 机 器 上 运行 ， 可 以 拔 掉 它 们 之 间 的 网 线 。 类 似 地 ， 也 可 
以 关闭 服务 器 的 网 络 接口 。 浏 览 器 不 能 识别 出 套 接 字 已 经 断 开 连接 ， 而 长 连接 方案 就 
能 处 理 这 种 情况 。 
在 使 用 Apache 时 ， 还 有 一 种 方式 可 以 用 于 找 出 为 请 求 提供 服务 的 Apache 进程 pid， 
然后 执行 sudo kill -s STOP 12345。( 这 里 的 12345 是 进程 pid。) 这 种 方式 的 效果 类 
似 拔 掉 网 线 ， 浏 览 器 不 能 检测 出 问题 ， 而 长 连接 处 理 方案 可 以 。STOP 标记 方式 进入 
休眠 状态 ， 用 sudo kill -s CONT 12345 可 以 将 其 重启 (类 似 把 网 线 插 回 去 ) 。 


为 什么 在 前 面 两 段 所 述 的 场景 中 ， 浏 览 器 不 能 检测 出 问题 呢 ? 想象 一 下 把 网 线 拔 出 片 
刻 再 插 回 去 ， 或 者 通过 手机 或 Wf 信号 上 网 时 ， 短暂 地 走出 信号 范围 又 回来 。TCP/ 
IP 有 针对 这 类 短暂 中 断 的 处 理 设计 。 客 户 闹 不 能 区 分 这 是 沉默 、 临 时 问题 还 是 致命 问 
题 ， 这 就 是 需要 一 个 长 连接 处 理 机 制 的 原因 。 














可 以 拿 一 个 客户 端 脚本 连接 到 fx_server.retry.php 试 一 下 效果 。(fx_client.retry.html 是 为 此 
而 设计 的 ， 唯 一 变动 的 地 方 是 它 连 接 的 URL。 注 意 它 有 一 个 长 连接 逻辑 ， 所 以 你 可 以 体验 
一 下 训 览 器 的 长 连接 机 制 和 我 们 自己 的 长 连接 机 制 之 间 的 交互 。) 通过 retry:10999， 可 以 
看 到 服务 器 活跃 1~20 秒 ， 然 后 沉默 10 秒 。 如 果 打 开 JavaScript 控制 台 ， 可 以 看 到 出 现 一 
个 错误 : 当 浏 览 器 检测 到 套 接 字 消失 时 就 会 报错 。 然 后 可 以 看 见 交 替 地 活跃 10 秒 (新 建 
连接 的 消息 会 打印 到 屏幕 )， 沉 默 10 秒 。 试 一 下 注释 掉 fx_server.retry.php 的 重 试 代 码 ， 在 
Firefox 中 (retry 的 默认 值 是 5 秒 )， 可 以 看 到 15 秒 的 活跃 和 5 秒 的 沉默 交替 进行 。 现 在 
试 一 下 把 fx_server.retry.php 的 retry 值 改 为 500 (也 就 是 半 秒 )， 就 可 以 在 控制 台 日 志 中 看 
见报 错 信息 ， 但 几乎 没有 服务 中 断 。 


最 后 ， 党 试 把 retry 设置 为 21 000。 这 比 我 们 的 20 秒 重 连 检测 时 间 要 长 ， 所 以 是 长 连接 
机 制 处 理 重 连 ， 而 不 是 浏览 器 的 SSE 机制。 现在 有 趣 的 事情 发 生 了 ， 在 每 分 钟 的 0 秒 、 
20 秒 和 40 秒 时 关闭 连接 ， 这 刚好 匹配 自 毁 时 间 ， 然 后 就 没有 数据 传 过 来 了 ! 这 真是 有 
趣 ! 确切 地 说 ， 这 只 是 自 毁 时 间 和 长 连接 超时 时 间 之 间 的 偶然 互动 。 党 试 修 改 自 毁 时 间或 
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JavaScript 中 的 keepaliveSecs 来 感受 一 下 。 或 者 更 好 一 点 ， 保 持 retry 比 keepaLiveSecs 
小 ， 并 且 把 自 毁 代码 放 入 代码 中 。 嗯 ， 不 要 着 急 ， 自 毁 也 是 下 一 节 的 主题 。 


5.4 添加 定期 的 关闭 / 重 连 


在 现实 世界 的 外 汇市 场 ， 周 末 没 有 数据 可 推送 “。 所 有 套 接 字 都 开 着 ， 但 所 有 发 送 的 数据 
是 长 连接 消息 。 尤 其 在 如 今 这 个 云 服务 时 刻 都 在 改变 运算 能 力 的 时 代 ， 保 持 套 接 字 连接 却 
只 发 送 长 连接 消息 ， 着 实 是 一 种 浪费 。 所 以 我 们 希望 服务 器 能 广播 消息 说 :“ 乡 亲 们 ， 周 
Ws 























可 以 在 后 端 加 上 如 下 代码 `: 


Swhen = strtotime("next Sunday 17:00 EST"); 
$until = date("Y-m-d H:i:s T", $when); 
$untilSecs = time() - S$when; 
sendData( array( 
"action" => "scheduled_shutdown", 
"until" => S$until, 
"until_secs" => S$untilSecs 


) 和 5 


这 段 代 码 把 应 该 重 连 的 时 间 改 发 送 给 了 客户 端 ， 这 个 值 在 until 字段 中 。 我 们 还 发 送 了 一 
个 Unix 时 间 戳 until_secs 字段 ， 这 方便 客户 端的 处 理 (这 也 意味 着 客户 端 不 需要 担心 时 
区 不 同 的 问题 ， 或 者 服务 器 时 钟 偏 慢 的 问题 : 服务 器 说 100 000 秒 后 再 回来 ， 这 就 是 我 们 
要 做 的 ) 。 








这 里 选择 了 纽约 冬季 时 间 的 周 日 下 午 5 点 ， 这 也 是 传统 的 外 汇 交 易 开 始 时 间 。 计 算 $until 
的 方式 有 一 点 粗糙 ， 如 果 已 经 是 周 日 ， 那 么 “下 周 日 ”(next Sunday) 就 会 导致 可 怕 的 错 
误 ， 其 次 ， 纽 约会 在 夏天 从 EST(UTC-05) 切换 到 EDT(UTF-04)。 或 者 直 白 点 说 ， 我 们 想 要 
从 三 月 的 第 二 个 周末 到 十 一 月 的 第 一 个 周末 都 用 EDT。PHP 能 自动 做 这 些 计 算 ， 但 那 超出 
了 本 书 的 范围 。 在 真实 应 用 中 也 需要 考虑 公共 假日 ， 所 以 应 该 考虑 从 一 个 数据 库 中 获取 所 
有 的 关闭 和 重 连 时 间 ， 而 不 是 通过 计算 来 获得 。 

















事实 上 ， 这 里 会 做 一 些 类 似 的 事情 (参见 fx_server.shutdown.php)， 主 循环 现在 会 从 磁盘 
上 找 一 个 叫 shutdown.txt 的 文件 ， 可 以 找到 strtotime 能 解析 的 日 期 戳 。 








注 4: 我 们 本 该 在 前 面 章节 介绍 的 模拟 服务 端 中 实现 这 个 功能 : 定期 查看 时 间 ， 然 后 在 纽约 时 间 的 周 五 下 午 
5 点 进入 一 段 时 长 48*3600 秒 的 休眠 。 但 是 我 让 它 以 24/7 的 方式 工作 ， 是 因为 你 可 能 需要 在 周末 时 调 
试 示 例 脚 本 ， 这 也 大 现实 主义 了 ! 
注 5: 注意 : 这 里 假设 脚本 是 运行 在 UTC(GMT) 时 区 ， 如 果 服 务 器 不 是 在 UTC 时 区 ， 那 就 在 PHP 脚本 的 
顶部 加 上 date_defautLt_timezone_set('UTC' ); 。 或 者 也 可 以 把 当地 时 间 惟 传 给 strtotime (但 这 会 给 
客户 端 带 来 更 多 的 工作 量 )。 


















































走出 象牙 塔 ， 打造 产品 级 品质 | 63 


这 是 本 书 第 一 次 用 到 strtotime， 如 果 你 不 熟悉 的 话 ， 参 见 附录 C.4 节 。 





然后 它 会 把 关闭 的 时 间 惟 发 给 客户 端 。 这 段 代 码 被 添加 到 了 主 无 限 循环 的 开始 部 分 : 


$s = @file get_contents("shutdown.txt"); 
if($s){ 
Swhen = strtotime($s); 
$untilSecs = Swhen - time(); 
if(Swhen > 0 && S$untilSecs > 0){ 
$until = date("Y-m-d H:i:s T",$when); 
sendData(array( 
"action" => "scheduled_shutdown", 
"until" => $until, 
"until_secs" => S$untilSecs 
)); 
break; 
} 
} 


第 一 行 用 @ 来 抑制 错误 消息 。 实 际 上 ， 这 里 先 检查 文件 是 否 存在 ， 然 后 再 加 载 。 如 果 文 件 


不 存在 ，$s 会 是 一 个 非 真 的 值 。 其 他 代码 基本 上 是 前 文中 出 现 过 的 示例 ， 加 了 一 点 对 时 间 
惟 的 错误 检测 (因为 时 间 玲 是 从 一 个 文件 中 读 取 的 ， 可 能 会 有 一 些 意料 之 外 的 状况 )。 








因为 这 里 是 用 夏季 时 间 ， 所 以 在 EDT 时 区 周 五 下 午 5 点 时 ， 需 要 创建 一 个 文件 ， 这 个 文 
件 的 内 容 是 :“next Sunday 17:00 EDT (EDT 时 区 的 下 周 日 17:00)”。 务 必 确 保 在 周 六 午夜 
时 删除 这 个 文件 。 如 果 确 实 不 希望 客户 端 在 周 日 白天 连接 ， 可 以 在 周 日 的 17:00 之 前 把 这 
个 文件 的 内 容 替 换 为 “17:00 EDT” (EDT 时 区 17:00)。 




















现在 来 看 一 下 前 端 怎 么 处 理 。 有 两 个 任务 : 一 个 是 如 何 识别 收 到 一 条 包含 关闭 时 间 的 消 
息 ， 另 一 个 是 如 何 执行 关 团 。 首 先 ， 在 主 循环 结尾 添加 下 面 这 段 代码 : 























else if(d.action=="scheduled_shutdown"){ 
document.getElementById("msg").innerHTML += 
"Scheduled shutdown from now. Come back at :" + 
d.until + "(in " + d.until_ secs + " secs)<br/>"; 
temporarilyDisconnect(d.until_ secs); 


temporarilyDisconnect() 函数 的 第 一 稿 如 下 所 示 : 


function temporarilyDisconnect(secs){ 

var millisecs = secs * 1000; 

if(keepaliveTimer){ 
clearTimeout(keepaliveTimer); 
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keepaliveTimer = null; 


} 

if(es){ 
es.close(); 
es = null; 


setTimeout(connect, millisecs); 


} 


停止 长 连接 计时 器 (不想 在 打算 休眠 的 那 段 时 间 触 发 它 )， 关 闭 SSE 连接 (向 后 兼容 方案 
中 的 连接 也 需要 在 这 里 关闭 )， 然 后 就 在 被 告知 的 时 刻 调用 connect()。 











我 说 的 是 “第 一 稿 "， 所 以 你 知道 这 里 会 有 些 问题 …… 但 它 真 的 运作 得 很 好 。 测 试 一 下 : 
在 浏览 器 中 打开 仅 _client.shutdown.html， 然 后 在 服务 器 中 该 文件 所 在 的 目录 下 创建 一 个 
shutdown.txt 文件 ， 在 这 个 文件 里 写 一 个 大 概 30 秒 后 的 时 间 惟 ， 推 荐 用 24 小 时 制 ， 并 
且 显 式 地 指明 时 区 。 比 如 ， 如 果 是 伦敦 的 夏天 ， 并 且 当 前 时 间 是 下 午 3:30:00， 那 就 写 
“15:30:30 BST” (回想 一 下 strotime() 的 工作 原理 ， 如 果 不 指定 日 期 ， 则 默认 为 当天 )。 
这 个 时 间 会 被 转化 为 GMT 格式 ， 所 以 在 浏览 器 中 会 出 现 一 条 消息 :“Scheduled shutdown 
from now. Come back at 2014-02-28 14:30:30 UTC(in 29 secs)””。 等 待 29 秒 后 它 又 回来 了 ， 
就 像 “见证 奇迹 的 时 刻 ”。 

















它 运 行 得 非常 完美 ， 到 底 有 什么 问题 ?给 你 个 提示 : 它 运行 得 非常 完美 并 且 精 确 地 在 约 
定 的 时 间 调 用 connect()。 发 现 这 里 面 潜 藏 的 危险 了 吗 ” 回 到 外 汇市 场 ， 想 象 一 下 你 拥有 
2000 个 客户 ， 设 想 一 下 在 纽约 时 间 周 日 17:00:00 会 发 生 什么 。 他 们 全 部 在 同一 瞬间 试图 连 
接 ， 然 后 流量 会 变 得 非常 惊人 。 


怎样 避免 这 种 情况 呢 ? 观察 发 现 ， 让 一 些 客户 早 一 点 连接 其 实 真 的 没什么 关系 。 那 不 如 加 
上 下 面 加 粗 的 那 两 名 代码 : 









































function temporarilyDisconnect(secs){ 
var millisecs = secs * 1000; 
millisecs -= Math.random() * 60000; 
if(millisecs < 0)return; 
if(keepaliveTimer){ 
clearTimeout(keepaliveTimer); 
keepaliveTimer = null; 


} 

if(es){ 
es.close(); 
es = null; 


setTimeout(connect, millisecs); 


} 
在 浏览 器 中 打开 你 _client.jitter.html 看 一 下 效果 。 它 将 客户 端的 连接 尝试 随机 地 均 摊 在 约定 

















注 6: 现在 开始 定期 关闭 ， 将 在 UTC 时 间 2014-02-28 14:30:30 (29 秒 后 ) 回来 。 一 一 译 者 注 
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连接 时 间 的 前 60 内 ， 第 二 行 的 意思 是 ， 如 果 根 本 不 需要 休眠 ， 那 么 甚至 都 不 要 重 连 。 顺 
便 说 一 下 ， 应 该 至 少 在 重 连 时 间 的 60 秒 前 删除 shutdown.txt， 不 然 那 些 提前 连接 的 客户 端 
又 被 告知 要 关闭 了 。 





5.5 发 送 Last-Event-ID 


当 丢 失 连 接 后 重 连 ， 无 论 如 何 ， 重 连 后 会 获取 到 最 新 的 数据 。 这 很 好 ， 但 对 任何 正常 的 有 
效 数 据 来 说 ， 这 意味 着 会 有 一 段 数据 的 缺失 。 在 第 4 章 中 ， 我 们 费劲 周折 地 保存 所 有 下 载 
的 历史 数据 ， 但 如 有 果 不 能 精确 和 完整 地 保持 ， 那 就 疫 那 么 有 价值 了 。 











幸好 ，SSE 协议 的 设计 者 考虑 到 了 这 一 点 。 在 建立 连接 时 ， 会 发 送 一 个 Last-Event-ID HTTP 
请 求 头 ， 它 指定 了 推送 数据 应 该 从 哪里 开始 。 这 个 ID 是 一 个 字符 串 ， 并 非 必 须 是 数字 。 





好 消息 是 ， 在 使 用 XMLHttpRequest 和 ActiveXObject 的 和 癌 后 兼容 方案 中 ， 可 以 用 
setRequestHeader() 图 数 来 模拟 这 种 行为 。 坏 消 息 是 ， 在 使 用 EventSource 时 不 能 手动 地 
指定 一 个 值 。 所 以 用 SSE 时 只 能 用 服务 器 之 前 发 送 的 值 ， 那 意味 着 在 一 个 全 新 的 连接 中 完 
全 不 能 指定 它 的 值 。EventSource 对 象 没 有 setRequestHeader() 函数 (至少 现 在 还 没有 )。 
这 是 〈 少 有 的 ) 向 后 兼容 方案 比 SSE 好 的 情况 。 











如 果 你 认为 限制 发 送 Last-Event-ID 请 求 头 是 出 于 安全 考虑 ， 这 样 服务 器 就 
能 阻止 访问 旧 数 据 。 我 想 指 出 的 是 ， 你 可 以 用 任何 主流 语言 的 客户 端 HTTP 
库 来 解决 这 个 问题 ， 所 谓 的 安全 是 错觉 。 























想象 一 下 长 连接 机 制 触 发 重 连 的 场景 ， 或 者 正在 用 HTML5 LocalStorage 对 象 保存 历史 数 
据 时 ， 用 户 刷 新 页 面 (因此 可 以 知道 他 接收 到 的 最 后 一 个 数据 事件 ， 包 括 它 的 也)。 在 这 
些 场景 中 ， 需 要 在 URL 中 发 送 ID。 所 以 ， 服 务 端 需要 同时 查看 URL 和 Last-Event-ID 请 
求 头 。 请 求 头 应 该 总 是 优先 的 〈 因 为 那 意味 着 这 是 一 个 EventSource 的 自动 重 连 ， 意 味 着 
URL 中 的 ID 已 经 过 期 了 ) 。 


接 下 来 要 孝 虑 的 是 ， 一 个 指定 的 SSE 连接 只 有 一 个 DD。 如 果 通 过 同一 个 连接 推送 不 同 的 
数据 〈 比 如 ， 不 同 的 外 汇 汇率 )， 该 怎么 做 呢 ? 有 一 种 简单 的 方法 和 一 种 复杂 的 方法 。 复 
杂 的 方法 会 在 下 一 节 介 绍 。 这 里 会 用 到 的 简单 方法 是 ， 使 用 当前 时 间 ， 有 具体 点 说 就 是 服务 
器 的 当前 时 间 ， 即 从 1970 年 到 现在 的 赣 秒 数 ， 使 用 这 个 毫秒 数 是 因为 ， 这 是 JavaScript 内 
置 的 格式 ， 不 需要 转化 。 服 务 端 该 怎么 做 呢 ? 只 需 在 每 条 数据 行 之 前 ， 加 一 个 包含 了 这 个 
时 间 的 id 字段， 这 样 客户 端 会 收 到 一 系列 这 样 的 数据 ， 如 下 所 示 : 
























































id:1387946750885 

data:{"symbol":"USD/JPY","timestamp":"2013-12-25 13:45:51", 4 
"rows":[{"id":1387946750112,"timestamp":"2013-12-25 13:45:50.112", 4 
"value":98.995},{"id":1387946750885,"timestamp":"2013-12-25 13:45:50.885", 4 
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"value":98.980}]} 


id:1387946751610 

data:{"symbol":"USD/JPY","timestamp":"2013-12-25 13:45:51", 4 
"rows":[{"id":1387946751610,"timestamp":"2013-12-25 13:45:51.610",w 
"value":98.985}]} 








id: 行 也 可 以 放 在 data: 行 的 后 面 ， 只 要 它们 都 在 标示 SSE 消息 结束 的 空 行 
前 面 就 行 了 。 





眼 尖 的 读者 会 注意 到 data: 行 的 数据 格式 和 我 们 现在 用 的 不 一 样 。rows 中 的 每 一 项 除了 有 
时 间 玲 外 ， 还 有 一 个 id 字段 。 这 样 做 是 因为 在 SSE 中 无 法 得 到 id 项 (有 意思 的 是 ， 在 疝 
后 兼容 方案 中 可 以 )。 注 意 ， 在 进行 JISON 编码 后 ，id 是 一 个 整数 ， 而 不 是 字符 串 。 








我 们 从 FXPair 类 中 的 修改 开始 。 相 对 于 fxpair.structured.php，fxpair.id.php 中 的 generate() 
国 数 只 修改 了 两 行 代码 。 新 版 的 generate() 如 下 所 示 ， 加 粗 部 分 是 添加 的 代码 : 





public function generate($t){ 
$bid = $this->bid; 
$bid += $this->spread * 100 * 
sin( (360 / S$this->long_cycle) * 
(deg2rad($t % S$this->long_cycle)) ); 
$bid += $this->spread * 30 * 
sin( (360 / S$this->short _ cycle) * 
(deg2rad(St % S$this->short_cycle)) ); 
$bid += (mt_rand(-1000,1000)/1000.0) * 10 * $this->spread; 
$ask = $bid + $this->spread; 


$ms = (int)(St * 1000); 
$ts = gmdate("Y-m-d H:i:s",$t).sprintf(".%03d",s$ms % 1000); 
return array( 
"symbol" => $this->symbol, 
"timestamp" => S$ts, 
"rows" => array( 
array( 
"id" => Sms， 
"timestamp" => S$ts, 
"bid" => number_format($bid, $this->decimal_places), 
"ask" => number_format($ask, $this->decimal_places), 


) 


) 
} 
st 是 从 1970 年 到 现在 的 秒 数 ， 带 了 小 数 部 分 。 要 获得 毫秒 数 sims， 用 St 乘 以 1000 (因为 
st 是 精确 到 毫秒 的 ， 用 (int) 截 去 微 秒 部 分 )。 然 后 把 这 个 数字 放 在 “id"=>$ms 这 一 行 发 送 
给 客户 端 。 
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要 在 fx_server.id.php 中 将 id 返回 给 SSE 客户 端 ， 需 要 在 fx_server.shutdown.php 的 基础 上 
加 两 行 代码 。 在 文件 最 上 面 加 上 inctude_once("fxpatir.id.php");， 引 入 新 的 FEXPair 类 。 
然后 在 sendData() 下 面 ， 添 加 男 一 个 辅助 函数 : 
































function sendIdAndData($data){ 
$id = $data["rows"][0]["id"]; 
echo "id:".json_encode($id)."\n"; 
sendData($data); 


它 输 出 id: 行 ， 然 后 通过 sendpata() 来 输出 data: 行 并 刷新 输出 缓冲 。 





在 刚刚 介绍 的 sendIdAndData() 中 ，echo "id:".json_encode($id)."\n"; 这 一 行 可 
以 等 同 于 echo "id:$td\n";， 因 为 $id 是 一 个 整数 ， 不 需要 特别 的 JSON 编码 ， 
修改 一 下 会 发 现 应 用 的 表现 是 一 样 的 。 这 里 显 式 地 使 用 json_encode()， 这 样 即 
便 $id 是 一 个 字符 串 甚至 更 复杂 的 数据 结构 ( 见 接 下 来 一 节 ) 也 可 以 运行 。 

















接 下 来 ， 在 主 循环 的 中 段 将 下 面 这 行 代码 ， 











sendData( S$symboLs[Six]->generate(sSt) ); 
改 为 : 


sendIdAndData( $symbols[$ix]->generate($t) ); 








要 在 浏览 嚣 中 使 用 它 ， 只 需 修改 前 端 文件 中 连接 的 URL， 不 需要 做 其 他 事情 ， 因 为 SSE 
对 id: 的 使 用 是 由 浏览 器 在 后 台 处 理 的 。 











现在 数据 项 中 有 一 个 整数 类 型 的 ID， 可 以 回 到 前 面 的 历史 数据 存储 ， 把 它 用 
作 键 ， 取 代 原 来 使 用 的 时 间 戳 字符 串 。 这 意味 着 键 占 8 字 节 ， 而 使 用 字符 串 
时 占用 24 字 节 。 这 可 能 意味 着 查找 会 更 快 些 ， 但 这 里 有 个 问题 : 我 们 也 在 接 
口中 使 用 了 这 个 时 间 发 字符 串 。 所 以 我 们 或 许 仍然 需要 将 其 存储 (需要 更 多 
的 内 存 ) ， 或 者 需要 用 JavaScript 的 Date 函数 从 毫秒 值 获得 (虽然 这 可 以 更 灵 
活 地 使 用 不 同 的 日 期 格式 ， 但 需要 更 多 的 CPU 资源 )。 我 选择 保持 原样 。 



































需要 注意 的 是 ，ID 是 (最新) 数据 的 时 间 改 ， 不 是 当前 时 间 。 这 在 前 面 的 代码 里 介绍 了 
(我 不 指望 你 知道 ID 数字 ， 但 最 后 3 位 是 秒 数 的 小 数 部 分 ， 倒 数 第 4 位 是 秒 数 的 最 后 一 
位 )。 当 然 ， 最 新 一 条 数据 的 时 间 蕉 和 当前 时 间 很 接近 ， 但 考虑 到 发 送 给 客户 端的 数据 可 
能 是 通过 一 系列 服务 器 串 行 地 传 过 来 的 ， 延 迟 会 因此 累加 。 我 们 需要 知道 数据 的 ID ， 因 为 
当 重 连 了 时 ， 我 们 用 那个 ID 来 告诉 服务 器 我 们 所 看 见 的 最 后 一 条 数据 ， 以 便 它 能 刚好 从 下 
一 条 数据 开始 重 发 。 








5.6 多 路 数据 ID 


如 果 数 据 不 是 按时 间 索 引 的 怎么 办 ? 比如 数据 是 来 自 一 个 使 用 自 增 式 主 键 的 SQL 数据 库 
会 怎样 ?使 用 Last-Event-ID 请 求 头 中 的 时 间 惟 ， 则 需要 通过 时 间 惟 查找 ， 这 种 查找 会 慢 ， 
或 者 需要 在 数据 库 中 新 增 一 个 索引 列 (这 会 降低 数据 库 写 入 的 速度 )。 这 里 真正 需要 的 
Last-Event-ID 的 值 是 所 用 主键 的 最 后 一 个 值 。 











但 如 果 是 轮 询 多 个 数据 库 表 会 怎样 ? 比如 ， 在 聊天 应 用 或 社交 网 站 中 ， 会 推送 各 种 类 型 的 
消息 : 聊天 消息 、 聊 天 请 求 、 好 友 登 录 、 好 友 退 出 、 新 好 友 请 求 等 。 需 要 通过 Last-Event- 
ID 来 传送 在 每 个 数据 库 表 中 都 有 的 最 后 一 条 数据 的 ID。 


昕 起 来 很 难 ， 对 吧 ? 但 我 有 好 消息 。 服 务 器 通过 id:， 客 户 端 通过 Last-Event-ID 发 送 的 这 
个 DD， 可 以 是 任意 字符 的 字符 串 (确切 点 说 ， 任 何 除 LR 或 CR 之 外 的 Unicode 字符 )。 既 
然 在 data: 字段 的 数据 使 用 了 JSON 格式 ， 何 不 在 id: 字段 也 使 用 JSON 呢 ? 如 下 所 示 : 








id:{"chatmessages":18304,"chatrequests":1048,"friendevents":8202} 


这 样 做 是 有 必要 的 ， 在 金融 行业 以 不 同 的 价格 销售 延 时 数据 是 很 普遍 的 。 比 如 说 ， 实 时 的 
股票 市 场 数据 能 卖 到 很 贵 ， 但 是 雅虎 和 谷歌 可 以 免费 地 提供 延 时 20 分 钟 的 数据 。 如 果 只 
购买 两 个 外 汇 对 的 实时 数据 ， 而 其 他 的 买 延 时 数据 ， 那 么 LastId 变量 就 会 一 直 是 从 现在 
往 前 的 20 分 钟 。 要 保证 无 论 何 时 需要 重 连 时 ， 都 不 会 使 某 些 外 汇 对 的 LastId 出 错 ， 做 法 
如 下 : 

















id:{"Llive":1234123412,"delayed":1234123018} 




















在 id: 字段 使 用 JSON 对 象 ， 还 有 一 件 事 需 要 注意 : 如 果 达 到 100 多 字 市 ， 就 不 能 用 GET 
请 求 了 ， 需 要 用 Cookie。 (为 什么 不 用 HTTP POST ? 参见 9.3 节 。) 如 果 达 到 了 几 千 字 节 ， 
通过 HTTP 请 求 头 发 送 时 会 有 问题 ( 记 住 是 SSE 发 送 这 个 请 求 头 ， 我 们 不 能 控制 它 )。 特 
别 是 当 请 求 头 的 总 大 小 〈 请 求 行 ， 所 有 的 请 求 头 ， 包 括 user agent 和 所 有 的 Cookie) 超过 
8 KB 时 ， 大 部 分 网 络 服务 软件 会 报错 (返回 413 状态 码 )。 














旧版 nginx 的 限制 是 4KB， 但 现在 默认 是 8KB， 并 且 可 以 配置 ， 参 见 
http://wiki.nginx.org/HttpCoreMod ule#large_client_header_buffers。Apache 也 可 以 做 
类 似 配置 ， 参 见 http://httpd.apache.org/docs/2.2/mod/core.html#imitrequestfieldsize。 














所 以 ， 如 果 id: 字段 超过 了 100 字 节 ， 想 一 下 是 否 有 更 好 的 方式 。 比 如 ， 能 和 否 把 用 户 会 话 
的 每 一 个 数据 的 位 置 都 保存 在 服务 端 ， 然 后 通过 Cookie 来 引用 这 个 会 话 ? 
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5.7 使 用 Last-Event-ID 


回 到 服务 端 脚本 ， 如 何 运 用 Last-Event-ID 数据 头 ? 当 使 用 PHP+Apache 时 ， 浏 览 器 发 送 
的 请 求 头 会 发 生 如 下 变化 。 

(1) 全 部 变 成 了 大 写 。 

(2) 加 上 了 HTTP_ 前 级 。 

(3) 被 置 于 $_SERVER 变量 


可 以 在 fx_server.id.php 中 看 到 如 下 代码 : 





if(array_key_exists("HTTP_LAST_EVENT_ID", $_SERVER)){ 
$lastId = $_SERVER["HTTP_LAST_EVENT_ID"]; 


} 
elseif(array_key_exists("lastId", $_POST)){ 
$lastId = $_POST["lastId"]; 


elseif(array_key_exists("lastId", $_GET)){ 
$lastId = $_GET["lastId"]; 


else $lastId = null; 


(下 一 节 会 介绍 为 什么 使 用 了 $_P0ST 和 $_GET。) 在 通过 HTTP 请 求 获得 了 用 于 查找 的 seed 
之 后 ， 先 通过 下 面 这 段 代 码 给 St 赋值 ， 然 后 用 St 来 设置 随机 种 子 : 





if(SLastId)St = $lastId / 1000.0; 





换 句 话说， 因为 这 只 是 个 测试 应 用 ， 基 本 上 就 把 Last-Event-ID 当做 seed 来 用 。 这 足够 用 
来 测试 及 理解 Last-Event-ID 的 工作 原理 。 在 真实 应 用 中 ， 这 里 是 要 请 求 历 史 数 据 的 地 方 ， 
然后 发 送 一 个 丢失 数据 的 补丁 。 














安全 提示 | lastId 是 纯粹 的 用 户 输入 ， 理 论 上 会 包含 任何 东西 ， 绝 对 不 要 假 
设 它 只 会 包含 前 端 JavaSeript 代码 会 赋予 的 值 ， 黑 客 可 以 放任 何 他 想 放 的 东 
西 在 里 面 。 

















前 面 的 代码 是 安全 的 ， 但 这 里 的 安全 校 验 很 巧妙 ， 预 期 $lastId 是 数字 类 型 
的 ， 当 除 以 1000.0 时 ， 如 果 它 不 是 数字 类 型 ，PHP 会 先 隐 式 地 将 其 转化 为 数 
字 。 如 果 黑 客 将 LastId 的 值 设置 为 {"hello":"tell me your password"}, 在 
除 以 1000.0 之 前 ，lastId 的 值 会 被 转化 为 0， 这 样 汪 的 值 就 成 了 January 1， 
1970， 黑 客 所 能 做 的 最 坏 的 事情 也 就 是 使 st 成 为 一 个 很 久 以 前 或 以 后 的 日 期 。 









































当 lastId 是 其 他 类 型 的 值 时 ， 那 就 需要 做 更 多 的 工作 来 处 理 它 并 弄 清 潜 在 的 
风险 并 处 理 。 本 书 不 是 关于 网 络 安全 的 ， 所 以 建议 看 一 下 与 你 正在 使 用 的 后 
端 语言 相关 的 安全 处 理 技术 。 






































5 章 


J 
Oo 
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如 何 测试 ? 与 前 文 介绍 过 的 测试 retry: 请 求 头 一 样 (参见 5.3.3 节 )。 所 以 ， 关 闭 连接 ( 打 
开 JavaScript 调试 窗口 ， 可 以 看 到 浏览 器 能 检测 出 SSE 父 接 字 消 失 )， 儿 秒 之 后 浏览 器 重新 
连接 并 且 接 着 上 一 次 的 外 汇 对 。 





你 会 发 现 数据 的 开始 时 间 灌 后 于 当前 时 间 ! 这 只 是 因为 是 假 数据 ， 如 果 你 
强迫 症 ， 实 在 受 不 了 ， 可 以 去 看 看 心理 医生 。 




















用 Node.js 获取 Last-Event-ID 


这 一 节 的 代码 完全 基于 PHP 特性 ， 如 果 用 Node.js 写 会 怎样 ? 下 面 这 段 代码 基于 第 2 
章 介 绍 过 的 basic_sse_node_servers.js 中 的 代码 进行 了 修改 : 


var url = require("url"); 


http.createServer(function (request, response) { 
var urlParts = url.parse(request.url, true); 
if (urLParts.pathname != "/sse") { 


} 

var LastId = null; 

if (request.headers["last-event-id"]) { 
LastId = request.headers["last-event-id"]; 


else if (urLParts.query["LastId"])LastId = urlPparts.query["lastId"]; 
console.log("Last-Event-ID:" + LastId); 





//SSE 数据 从 这 里 输出 
}).listen(port); 
(可 以 在 本 书 源码 的 basic_sse_node_server.headers.js 文件 找到 这 段 代码 。) 
HTTP 请 求 头 在 request.headers 中 ,优雅 简单 ， 只 需 注 意 ， 它 们 全 部 转化 成 小 写 的 了 。 
在 函数 的 最 上 面 ， 解 析 request.url， 然 后 就 可 以 在 urLParts.query 中 获得 GET 数据 。 


这 里 没有 介绍 怎么 获取 POST 数据 ， 那 会 复杂 一 点 ， 虽 然 才 多 了 6 行 左右 的 代码 。 
但 真正 复杂 的 地 方 在 于 解析 POST 数据 是 异步 的 。 因 此 代码 需要 重 构 来 使 用 回调 函数 ， 
在 附注 内 容 里 益 述 这 个 有 些 过 于 复杂 了 。 














注 7: 关于 这 个 主题 的 讨论 可 以 参见 http://stackoverflow.com/q/4295782/841830。 
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5.8 在 重 连 时 发 送 ID 

上 一 节 介 绍 了 如 何 从 Last-Event-ID 中 获取 $lastId， 也 包含 了 从 POST 和 GET 数据 的 
LastId 字段 中 查找 。 这 样 我 们 可 以 在 新 建 连接 时 指定 ID ， 而 不 依赖 于 底层 的 SSE 协议 。 
为 什么 需要 这 样 做 ?因为 EventSource 现在 还 不 能 发 送 HTTP 请 求 头 ? 不 ， 那 为 什么 还 需 
要 ?因为 在 下 面 两 种 情况 下 需要 它 。 


。 当 长 连接 触发 时 ， 是 JavaScript 来 做 重 连 ， 而 不 是 浏览 器 实现 的 SSE 机 制 。 
。 当 浏 览 器 重 载 页 面 ， 可 以 从 Cookie 或 LocalsStorage 对 象 中 获取 最 后 的 ID。 


注意 代码 的 处 理 顺 序 : 先 到 先 得 。 如 果 请 求 头 中 有 ， 就 用 请 求 头 中 的 ， 否 则 ， 就 从 POST 
数据 中 查找 (事实 上 ， 这 是 针对 后 面 两 章 介 绍 的 向 后 兼容 方案 的 ， 原 生 的 SSE 不 支持 
POST 数据 )。 如 果 既 没有 Last-Event-ID 请 求 头 又 没有 在 POST 数据 中 找到 lasttd， 那 就 只 
能 从 URL 中 查找 LastId。 这 很 重要 ， 因 为 当 SSEL 发 送 Last-Event-ID 进行 重 连 时 ， 它 将 
使 用 相同 的 URL。 如 果 把 GET 数据 的 优先 级 放 在 Last-Event-ID 请 求 头 之 前 ， 那 会 用 到 一 
个 旧 的 ID 而 不 是 最 新 的 。 

































































客户 端 需要 做 哪些 修改 呢 ， 先 定义 一 个 全 局 变量 : 





var LastId = null; 
如 果 在 Localstorage 对 象 中 有 一 个 永久 值 ， 可 以 用 它 来 初始 化 LastId。 


只 需 将 LastId 附加 到 SSE 的 URL 中 ， 而 不 需要 考虑 其 他 兼容 方案 (其 他 方案 可 以 使 用 
HTTP 请 求 头 的 方式 )。 所 以 只 需 修 改 startEventSource()， 而 不 是 connect()， 现 在 代码 
如 下 所 示 : 








function startEventSource() { 
if (es)es.close(); 
es = new EventSource(url); 
es.addEventListener("message", 
function (e) { 
processOneLine(e.data); 
}, false); 
es.addEventListener("error", handleError, false); 


} 
修改 之 后 是 这 样 ( 粗 体 是 修改 的 部 分 ) : 


function startEventSource() { 
if (es)es.close(); 
var yu = url; 
if (lastId)yu += "LastId=" 
+ encodeURIComponent(LastId) + "&"; 
es = new EventSource(u); 
es.addEventListener("message", 





72 | 第 5 章 


function (e) { 
processOnelLine(e.data); 
}, false); 
es.addEventListener("error", handleError, false); 


3 


最 后 一 步 得 益 于 在 第 4 章 中 做 的 重 构 (给 每 一 项 数据 添加 id 字段 )， 在 processOneLine(s) 
函数 中 ， 现 在 是 这 样 的 : 





for (var ix in d.rows) { 
var rr = d.rows[ix]; 
x.innerHTML = d.rows[ix].bid; 
full_history[d.symboll][r.timestamp] = [r.bid, r.ask]; 


现在 在 循环 的 最 后 加 一 行 ， 这 样 全 局 变量 LastId 总 是 最 新 的 ID。 


for (var ix in d.rows) { 
var r = d.rows[ix]; 
x.innerHTML = d.rows[ix].bid; 
full_history[d.symbol][r.timestamp] = [r.bid, r.ask]; 
LastId = r.id; 
} 


同样 ， 其 至 在 浏览 器 关闭 后 使 用 Web Storage 来 保存 数据 








ID 和 多 路 数据 源 


记 住 ， 正文 中 介绍 的 方案 (一 个 全 局 的 lastId) 只 适用 于 所 有 的 外 汇 对 (也 就 是 多 路 
数据 推送 ) 共用 一 套 ID 系统 的 情形 。 在 我 们 的 场景 中 ， 所 有 的 外 汇 对 用 id 代表 数据 
时 间 (从 1970 年 到 现在 的 毫秒 数 ) 。 


但 即便 用 时 间 玲 作为 唯一 ID， 也 仍然 需要 注意 。 如 果 系 统 是 广播 来 自 两 个 或 更 多 
交易 所 的 数据 ， 这 两 个 数据 可 能 不 是 很 同步 ， 或 者 其 中 一 个 有 临时 的 延迟 。 举 个 例 
子 ， 来 自 纽约 证 券 交 易 所 的 最 新 数据 是 14:30:27.450 的 ， 而 纳 斯 达 克 的 最 新 数据 还 是 
14:30:22.120 的 ， 有 5 秒 的 数据 延迟 ， 这 时 连接 断 开 了 。 重 连 时 ， 如 果 以 14:30:27.450 
作为 最 后 数据 的 时 间 ， 就 会 丢失 纳 斯 达 克 5 秒 的 数据 ; 反之 ， 如 果 用 14:30:22.120， 
就 会 有 5 秒 的 纽约 证 券 交 易 所 的 重复 数据 。 


























所 以 处 理 两 个 数据 源 时 ， 需 要 分 别 维护 各 自 的 最 后 ID (参见 5.6 节 )。 








要 测试 这 个 ， 需 要 强制 长 连接 计时 器 超时 ， 意 味 着 脚本 需要 进入 沉默 ， 而 不 是 死亡 〈 如 果 
套 接 字 干 净 地 销毁 ，SSE 重 连 机 制 会 第 一 个 处 理 )。 一 种 实现 方式 是 ， 在 fx_server.id.php 
文件 的 无 限 循 环 最 上 面 加 上 下 面 这 行 代码 : 


if($t % 10 == 0){sleep(45);break;} 
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换 句 话说， 就 是 每 10 秒 休眠 很 长 一 段 时 间 ， 然 后 退出 循环 。( 客 户 端 会 在 sleep() 结束 之 
前 断 开 连 接 ， 这 样 PHP 会 被 关闭 ， 因 此 break 在 这 里 并 不 需要 。) 如 果 用 那 种 方法 ， 当 重 
连 时 会 引发 一 个 问题 ， 因 为 St 会 除 以 10， 所 以 会 周而复始 地 立即 失败 。 变 通 的 方案 是 在 
进入 无 限 循环 之 前 加 上 下 面 这 行 代码 ， 这 只 是 提前 了 除 以 10 的 时 机 : 























while($t % 10 == 0 || $t % 10 == 9)$t += 0.25; 


要 看 已 经 写 好 的 代码 ， 参 见 本 书 源码 的 fx_server.die_slowly.php 文件 ， 它 与 
fx_client.die_slowly.html 配套 使 用 (与 fx_client.id.html 相 比 ， 唯 一 变动 的 地 
方 是 要 连接 的 URL)。 


当 测 试 这 段 代码 时 ， 会 看 到 数据 传输 几 秒 后 停止 了 。20 秒 后 (长 连接 计时 器 的 时 长 )， 它 
又 重新 连接 ， 并 且 数 据 刚好 接 上 断 开 连 接 时 的 位 置 。( 参 见 5.3.3 节 ， 找 出 非 正常 地 销毁 套 
接 字 的 方法 ， 然 后 看 看 代码 如 何 处 理 这 种 情况 。) 


5.9 不 要 全 局 化 ， 考 虑 本 地 化 


到 目前 为 止 ， 代 码 中 已 经 使 用 了 大 量 的 全 局 变量 ， 附 录 B 会 介绍 为 什么 这 样 不 好 以 及 如 何 
改进 ， 但 重点 是 使 用 全 局 变量 不 利于 代码 复 用 : 不 能 在 一 个 页 面 中 使 用 多 个 SSE 连接 。 下 
面 的 代码 源 自 fx_client.id.html， 粗 体 部 分 是 增加 的 代码 : 












































var url = "fx_server.id.php?"; 


function SSE(uyrl,options){ 
if(!options)options={}; 
var defaultOptions={ 
keepaliveSecs: 20 
}; 
for(var key in defaultOptions) 
if(!options.hasOwnProperty(key)) 
options[key]=defaultOptions[key]; 


var es = null; 

var fullHistory = {}; 

var keepaliveTimer = null; 
var lastId = null; 


function gotActivity(){ 
if(keepaliveTimer != null) 
clearTimeout(keepaliveTimer); 
keepaliveTimer = setTimeout( 
connect, options.keepaliveSecs * 1000); 


} 


. (all other functions untouched) 
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connect(); 


setTimeout(function(){new SSE(url);}, 100); 
有 两 个 主要 的 变化 。 


。 封装 所 有 的 变量 和 函数 ， 这 样 SSE 就 是 唯一 的 全 局 变量 ， 这 就 可 以 创建 多 个 实 
。 引入 options 参数 ， 这 样 一 切 都 是 可 配置 的 ，keepaliveSecs 被 移 到 了 这 个 位 置 。 


RE 














我 说 过 可 以 创建 多 个 实例 ， 但 只 创建 2 个 实例 而 不 考虑 数据 及 其 展示 数据 是 不 合理 的 。 现 
在 ， 代 码 经 过 了 硬 编码 ， 以 使 用 fx_client.closure.html 中 的 静态 HTML。 所 以 两 个 实例 会 在 
控制 HTML 上 有 冲突 。 该 怎么 做 ?如 果 想 以 一 个 HMTL 表格 来 展示 来 自 两 个 不 同 源 的 合 
并 数据 (比如 ， 美 元 /日 元 来 自 一 个 数据 源 ， 欧 元 /美元 来 自 另 一 个 数据 源 )， 应 该 在 SSE 
构造 函数 中 取出 fullHistory 后 ， 返 回 给 一 个 全 局 变量 ， 并 伴随 有 updateHistoryTable() 
和 makeHistoryTbody()。 另 一 方面 ， 如 果 要 在 浏览 器 中 展示 两 套数 据 ， 需 要 把 每 块 HTML 
分 别 包 衰 在 一 个 div 中 ， 并 且 把 div 的 ID 作为 参数 传 给 SSE 对 象 (参见 附录 B“ 两 杯 茶 
和 两 种 茶 "， 这 是 后 面 这 个 方案 的 例子 ) 。 


5.10 阻止 缓存 


浏览 器 在 是 否 应 该 缓存 数据 流 方面 会 有 些 不 确定 。 但 是 ， 稍 微 明 显 一 点 并 无 大 碍 。 所 以 ， 
在 脚本 的 最 上 面 (靠近 设置 Content-Type 请 求 头 的 地 方 ) 添加 下 面 两 行 代码 : 



















































































header("Cache-ControL: no-cache, must-revalidate"); 
header("Expires: Sun, 31 Dec 2000 05:00:00 GMT"); 


第 一 行 是 HTTP/1.1 规范 ， 本 来 只 需要 这 一 行 就 够 了 ， 因 为 这 个 规范 是 在 1999 年 定义 的 。 
但 是 ， 现 在 仍然 还 有 一 些 旧 的 代理 服务 器 ， 第 二 行 就 是 起 这 个 作用 的 ， 设 置 成 任何 一 个 过 
去 的 日 期 即 可 。 也 可 以 再 添加 一 行 header('Pragma: no-cache');， 但 这 对 新 老 浏览 器 、 服 
务 器 以 及 代理 服务 器 都 是 完全 多 余 的 。 


5.11 阻止 死亡 

这 段 代 码 是 PHP 专 有 的 ， 并 且 在 Windows 上 比 在 Linux 上 更 重要 。 如 果 脚 本 挂 掉 了 30 
秒 ， 这 段 代码 正好 可 以 修复 ， 附 录 C 的 C.6 节 介 绍 了 为 什么 要 这 么 做 。 只 需 把 这 段 代 码 放 
到 脚本 的 最 上 面 (刚刚 在 date_default_timezone_set('UTC'); 这 一 行 后 面 就 好 ) : 





















































set _ time limit(0); 
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业主 生生 上 放生 : 
5.12 精 简 的 简 单 办 法 
摆脱 腔 肿 的 简单 办 法 ， 只 需 下 面 这 粒 灵 丹 妙 药 就 可 美梦 成 真 : 














AddOutputFilterByType DEFLATE text/html text/plain text/xml text/event-stream 


如 果 插 入 到 正确 的 位 置 (比如 ，Apache 服务 的 配置 文件 )， 它 会 对 返回 的 数据 进行 gzip 压 
缩 。 但 现在 配置 中 查找 相似 的 语句 ， 可 能 只 需要 添加 text/event-stream 到 已 有 的 配置 中 。 
比如 ， 在 Ubuntu 中 ， 有 一 个 deflate.conf 文件 (在 /etc/apache2/mods-enabled/ 目 东 下 )， 只 
需 在 含 text/plaiin 的 那 一 行 的 后 面 加 上 text/event-stream。 

















另 一 种 配置 Apache 的 方式 是 ， 除 了 一 些 图 片 格式 外 ， 将 其 他 全 部 都 DEFLATE。 如 下 所 示 
(如 果 已 经 是 这 样 了 ， 那 就 没有 什么 需要 为 SSE 而 添加 的 ) : 




















<Location /> 
SetOutputFilter DEFLATE 
SetEnvIfNoCase Request URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary 
Header append Vary User-Agent env=!dont-vary 

</Location> 


更 多 关于 Apache 压缩 方面 的 配置 参见 http://httpd.apache.org/docs/2.4/mod/mod_deflate.html。 
添加 Vary 请 求 头 是 为 避免 一 些 代 理 浏 览 器 的 bug。 




















如 果 用 IIS 作为 网 络 服务 器 软件 ， 关 于 如 何 为 动态 内 容 配置 压缩 可 以 参见 这 篇 文章 : http:// 


technet.microsoft.com/en-us/library/ce753681.aspx 





如 果 使 用 nginx， 参 见 http://nginx.org/en/docs/http/ngx_http_gzip_module.html。 注 意 ， 可 能 
需要 把 gzip_min_length 设 成 0, 或 者 比较 小 的 值 ， 以 确保 它 也 适用 于 流 式 传输 的 数据 。 


5.13 本章 回顾 


本 章 已 经 开始 尝试 改进 应 用 的 质量 ， 方 法 包括 添加 错误 报告 ， 发 送 长 连接 消息 ， 避 免 缓 存 
问题 以 及 出 现 问 题 时 重 连 。 在 重 连 的 方案 上 ， 同 时 使 用 了 SSE 的 内 置 retry 机 制 和 我 们 自 
己 的 方案 ， 它 们 都 依赖 于 应 用 向 我 们 发 送 断 开 连 接 前 看 到 的 最 新 数据 的 ID。 还 介绍 了 定期 
关闭 和 支持 多 路 连接 。 


接 下 来 两 章 关 注 应 用 的 使 用 范围 ， 而 不 是 质量 ， 在 保证 本 章 介绍 的 产品 级 品质 特性 的 前 提 
下 ， 人 允许 不 支持 SSE 的 浏览 器 也 能 接收 到 一 样 的 数据 。 
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向 后 兼容 : 其 他 数据 推送 荣 略 





本 章 要 介绍 的 是 一 种 叫 长 轮 询 的 向 后 兼容 解决 方案 ， 它 〈 稍 作 调 整 ) 几乎 可 以 适用 于 所 有 
浏览 器 。 如 林 数 据 推送 的 频率 相对 较 低 ， 那 几乎 察觉 不 到 它 的 低 效 性 ， 可 以 应 用 在 任何 地 
方 ， 但 通常 只 会 在 没有 原生 支持 SSE 的 浏览 器 上 使 用 这 种 方案 。 














本 章 和 下 一 章 会 从 最 简单 的 示例 代码 开始 介绍 。 然 后 ， 会 对 第 5 章 末尾 介绍 的 外 汇 对 示例 
做 一 些 修改 以 支持 长 轮 询 。 在 本 章 末 尾 ， 我 们 会 使 这 个 产品 级 品质 的 真实 数据 推送 应 用 能 
够 覆盖 99% 的 浏览 器 (虽然 有 不 同 程度 的 低 效 )。 


6.1 浏览 器 战争 

从 上 世纪 90 年 代 中 期 开始 ， 浏 览 器 之 间 的 差异 (也 就 是 “浏览 器 战争 ") 就 一 直 困 扰 着 我 
们 。 而 当 微 软 加 入 这 场 战争 之 后 ， 情 况 变 得 尤其 麻烦 。 我 们 从 此 进入 了 一 个 各 大 浏览 器 开 
发 商 通过 单方 面 地 添加 特性 的 方式 ， 使 Web 变 得 更 好 的 时 期 。 这 是 浏览 器 用 户 (就 像 你 我 
这 样 的 ) 和 开发 者 们 (还 是 你 我 这 样 的 ) 都 不 愿意 看 到 的 局 面 。 标 准 曾 被 讨论 过 而 后 又 被 
忽视 ， 只 是 最 近 几 年 ， 所 有 的 浏览 器 开发 商 才 开始 认真 对 竺 标准。 浏览 器 开发 商 最 终 意识 
到 他 们 应 该 在 用 户 体验 和 运行 速度 上 做 出 特色 ， 而 不 是 做 一 些 独 有 的 特性 。 






































但 我 们 还 是 要 处 理 他 们 造成 的 混乱 。 即 便 使 用 最 新 的 HTML5 技术 ， 这 种 混乱 依然 存在 ， 并 
且 至 少 会 持续 3 到 4 年 。 当 SSE 到 来 时 ， 我 会 首先 羞 硅 谷歌 ， 然 后 是 微软 。Android 内 置 浏 
览 器 直到 Android 4.4 才 开 始 支持 SSE (一 些 更 早 版 本 的 Android 设备 上 用 Chrome 可 以 支持 
SSE)。XHR 向 后 兼容 方案 (下 一 章 中 介绍 ) 适用 于 Android 3 以 后 的 版 本 ， 但 在 Android 2.x 
上 不 行 〈 写 本 书 时 ， 仍 然 有 大 量 Android 2.x 的 用 户 ， 参 见 http:/bitly/wiki-android-versions ) 。 
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庆幸 的 是 ， 微 软 已 经 使 下 的 每 个 版 本 更 多 地 迎合 标准 ， 所 以 正 9 之 后 的 版 本 勉强 被 大 部 分 
网 络 开发 者 们 所 接受 。 但 是 ， 到 正 11 都 还 没有 支持 SSE， 下 一 章 的 XHR 向 后 兼容 方案 不 
适用 于 IE9 及 更 早 版 本 。 还 有 另 一 种 叫做 iframe 的 向 后 兼容 方案 也 会 在 第 7 章 介 绍 ， 但 它 
只 适用 于 IE8 以 及 更 高 版 本 。 


本 章 介绍 的 长 轮 询 方案 效率 上 不 及 原生 的 SSE (也 不 及 第 7 章 介绍 的 向 后 兼容 方案 )， 但 
对 Android 2.x 和 IE6/IE7 来 说 ， 这 是 唯一 的 选择 。 事 实 上， 在 大 部 分 应 用 中 ， 这 种 低 效 并 
不 明显 。 但 如 果 是 每 秒 发 送 多 个 更 新 ， 可 能 其 他 资源 (客户 端的 CPU、 服 务 端的 CPU、 网 
络 带 宽 ) 的 占用 会 比较 明显 。 





下 











这 并 不 是 说 不 能 在 亚 秒 级 的 频率 下 使 用 长 轮 询 ， 我 试 过 用 这 种 方案 每 秒 发 送 
10 次 更 新 ， 表 现 并 没有 太 差 。 在 每 秒 发 送 100 次 ， 并 且 发 送 一 个 ID 指定 最 
后 收 到 的 数据 (参见 5.5 节 ) 的 情况 下 ， 这 种 方案 还 能 跟 上 一 一 可 以 获得 所 
有 的 数据 ， 但 是 一 来 一 堆 ， 不 能 很 清晰 地 每 秒 获 得 100 条 数据 。 


6.2 ”什么 是 轮 询 

在 介绍 什么 是 长 轮 询 之 前 ， 先 介绍 一 下 什么 是 常规 轮 询 (如 图 6-1 所 示 )。 常 规 轮 询 好 比 
你 去 斋 好 朋友 家 的 门 并 且 问 她 :“ 准 备 好 出 去 玩 了 吗 ””， 她 会 立即 回答 “好 了 ”或 者 “ 没 
有 ”， 如 果 她 说 “好 了 ”， 那 你 们 就 可 以 高 兴 地 出 去 玩 了 ; 如 果 她 说 “没有 ”， 当 着 你 的 面 
把 门 关 上 了 ，30 秒 后 你 又 来 敲 门 并 且 再 问 一 遍 刚 才 的 问题 。 最 后 ， 要 么 她 准备 好 了 ， 要 么 
她 并 不 是 你 真正 的 好 朋友 ， 要 么 你 早上 吃 大 薪 了 。 



























































图 6-1: 轮 询 你 的 好 友 
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关于 常规 轮 询 ， 你 需要 了 解 的 是 ， 常 规 轮 询 就 像 你 朋友 一 旦 答应 了 ， 就 会 坐 在 那儿 ， 像 僵 
己 一 样 盯 着 墙 ， 等 着 你 过 来 再 次 澳门 。 





在 我 们 这 个 外 汇 应 用 中 ， 常 规 轮 询 意味 着 以 一 个 固定 的 频率 ， 比 如 每 10 秒 一 次 ， 发 送 一 
个 Ajax HTTP 请 求 来 询问 数据 。 做 常规 轮 询 需 要 确定 的 是 ， 是 要 做 采样 ， 还 是 要 接收 一 
切 。 如 果 是 采样 ， 服 务 端 就 发 送 所 有 外 汇 对 的 最 新 价格 ， 每 个 外 汇 对 对 应 一 个 价格 。 客 户 
端 会 获取 一 个 价格 快照 ， 而 不 是 每 次 轮 询 请 求 的 价格 。 采 样 的 替代 方案 是 ， 每 次 轮 询 时 ， 
将 已 接收 到 的 最 新 数据 的 时 间 发 发送 给 服务 端 ， 然 后 请 求 那个 时 间 之 后 的 全 部 数据 。 如 果 
没有 新 数据 ， 服 务 端 可 能 就 返回 一 个 空 数 组 ， 如果 有 大 量 数据 ， 服 务 端 就 会 返回 一 个 很 大 
的 数组 。 与 采样 相 比 ， 这 种 方案 需要 在 客户 端 维护 一 个 完整 的 历史 记录 数据 。 


A 人: 
6.3 怎样 做 长 轮 询 
长 轮 询 和 常规 轮 询 有 什么 不 同 呢 ?” 回 到 找 好 朋友 玩 的 例子 。 我 们 去 项 门 然后 问 她 :“ 准 备 
好 出 去 玩 了 吗 ? ”她 回答 :“ 没 有 ， 但 让 门 这 样 开 着 吧 ， 我 一 准备 好 了 就 过 来 告诉 你 。” 参 
见 图 6-2， 注 意 如 何 只 融 一 次 门 ， 门 如 何 保持 打开 ， 以 及 每 次 访问 如 何 获取 数据 。 
































图 6-2: 长 轮 询 你 的 好 友 


对 应 到 我 们 的 应 用 中 就 是 这 样 的 : 发 送 Ajax HTTP 请 求 ， 但 并 不 是 询问 最 新 的 价格 数据 ， 
而 是 要 求 下 一 次 有 新 数据 时 被 告知 。 如 果 没 有 数据 更 新 ， 就 一 直 这 样 打开 一 个 套 接 字 ， 然 
后 一 有 新 数据 就 立即 发 送 ， 并 关闭 这 个 套 接 字 。 然 后 立即 为 下 一 个 数据 更 新 开始 一 个 新 的 
长 轮 询 连 接 。 


长 轮 询 和 SSE 最 关键 的 区 别 在 于 ， 需 要 为 每 一 次 数据 更 新 新 建 一 个 HITP 连接 。 这 也 有 
和 SSE/WebSocket 一 样 的 整 端 ， 会 几乎 一 直 占 用 一 个 专门 的 套 接 字 。 在 延迟 方面 ， 长 轮 询 
几乎 表现 得 和 SSE 一 样 ， 一 有 新 数据 就 能 立即 检测 到 ， 但 也 只 是 几乎 一 样 好 ， 因 为 每 次 要 
花费 几 毫 秒 新 建 一 个 HITP 连接 。 把 数据 更 新 的 频率 提高 到 每 秒 10 次 以 上 之 后 ， 所 谓 的 
“ 儿 毫 秒 ” 就 会 成 为 主要 的 延迟 耗 时 〈 在 移动 网 络 等 慢 延 迟 网 络 上 ， 所 谓 的 几 毫 秒 可 能 实 
际 上 是 成 百 上 千 剖 秒 ， 所 以 它 从 一 开始 就 慢 了 )。 
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长 轮 询 是 否 总 比 常规 轮 询 好 


哪个 更 好 取决 于 你 怎么 定义 更 好 。 从 延迟 的 角度 看 ， 长 轮 询 总 是 更 好 。 当 服务 器 有 新 
数据 时 ， 长 轮 询 能 立即 获取 ， 而 常规 轮 询 则 需要 等 到 下 一 次 轮 询 (SSE 和 下 一 章 要 介 
绍 的 其 他 向 后 兼容 方案 也 同样 具备 这 种 延迟 方面 的 优势 ) 。 
但 如 果 从 带宽 占用 的 角度 来 看 呢 ? 答案 并 不 明确 。 如 果 外 汇 交 易 价 格 每 秒 更 新 两 次 ， 
长 轮 询 需要 每 分 钟 创建 120 个 HITP 请 求 ， 如 果 用 每 10 秒 一 次 的 常规 轮 询 ， 每 分 钟 
只 需要 6 个 HTTP 请 求 。 所 以 常规 轮 询 更 好 。 但 是 ， 相 反 ， 如 果 外 汇 交 易 价格 每 分 钟 
并 二 长 轮 询 只 需要 每 分 钟 创建 两 个 HTTP 请 求 ， 而 10 秒 一 次 的 常规 轮 询 仍然 
需要 创建 6 个 HTTP 请 求 ， 并 且 廷 迟 更 糟 | 
关于 数据 的 知识 以 及 数据 更 新 的 确切 时 间 ， 也 能 应 用 到 长 轮 询 或 SSE: 当 不 需要 任何 
数据 的 时 候 断 开 连 接 。 这 在 延迟 方面 是 一 样 的 (假设 能 及 时 重 连 ) ， 但 节省 了 套 接 字 
的 占用 (以 及 相关 资源 开销 ， 比 如 Apache 进程 )。 这 是 5.4 节 介 绍 过 的 技术 (如果 你 
使 用 这 种 方案 ， 帘 切 关注 一 下 为 什么 重 连 会 随机 拌 动 )。 


6.4 给 我 看 些 代码 
说 了 很 多 ， 来 点 代码 平衡 下， 如何》 首先 来 看 后 端 代码 ， 


<?ph 

ee dd //2.5s 

header("Content-Type: text/plain"); 

echo date("Y-m-d H:i:s") . "\n"; 
这 上段 代码 相当 简短 。 把 这 段 代码 保存 为 minimal_longpoll.php 文件 并 放 到 网 络 服务 器 上 ， 当 
调用 它 时 ， 会 有 2.5 秒 的 等 待 ， 然 后 展示 当前 时 间 戳 。 需 要 指出 的 是 ， 是 在 休眠 之 后 而 不 
是 之 前 发 送 请 求 头 。 休 眠 是 为 模拟 等 待 下 一 次 数据 更 新 ， 并 且 在 那 之 前 并 不 知道 会 发 送 什 
么 样 的 数据 。 比 如 ， 基 于 一 些 外 部 事件 ， 可 能 最 终 需 要 发 送 一 个 错误 码 ， 这 种 情况 下 ， 代 
码 就 要 改 成 如 下 样式 : 














<?php 
usleep(2500000); //2.5s 
$cat = (rand(1, 2) == 1) ? "dead" : "alive"; 


if ($cat == "dead") { 
header ("HTTP/1.0 404 Not Found"); 
echo "Something bad happened. Sorry."; 
} elsef{ 
header("Content-Type: text/plain"); 
echo date("Y-m-d H:i:s") . "\n"; 
} 


现在 来 看 看 前 端 代码 ,把 minimal_longpoll_test.html 文 件 放 在 与 minimal longpoll.php 相同 的 目录 下 ， 
并 在 浏览 器 中 打开 ， 会 看 到 “Preparing!” 在 屏幕 上 闪烁 一 会 儿 ， 然 后 JavaScript 开始 运行 并 将 它 
赫 换 为 “Started!"。 再 过 一 会 儿 被 替换 为 [1]， 这 表明 已 经 成 功 建 立 一 个 连接 〈readyState==1)。 
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两 秒 半 之 后 会 显示 .[ 菇 .[2].[3].[4]， 后 面 跟着 一 个 时 间 戳 ， 然 后 在 下 一 行 ， 有 另 
(意味 着 另 一 个 长 轮 询 连 接 已 经 创建 )。 你 所 看 到 的 显示 效果 会 因 浏览 器 不 同 而 不 同 ， 这 
决 于 Ajax 的 实现 方式 ， 只 有 [1] (Ajax 请 求 开始 ) 和 [4] (Ajax 请 求 完 成 ) 是 重要 的 。 
解 这 里 的 1、2、3、4 分 别 是 什么 意思 ， 可 以 参看 本 节 附 注 内 容 “AjaxreadyState 。 








<!DOCTYPE htmL> 
<htmL> 
<head> 
<noscript> 
<meta http-equiv="refresh" 
content="0;URL=Longpoll.nojs.php"> 
</noscript> 
<meta charset="utf-8"/> 
<title>Minimal long-poll test</title> 
</head> 
<body> 
<p id="x">Preparing!</p> 
<script> 
function onreadystatechange() { 
s+= ".[" + this.readyState + "]"; 
document.getElementById( ‘x’ ).innerHTML = s; 
if (this.readyState != 4)return; 
s += this.responseText + "<br/>\n"; 
document.getElementById( ‘x” ).innerHTML 
setTimeout(start, 50); 


} 


S， 


function start() { 
var xhr; 
if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
else { 
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
xhr .onreadystatechange = onreadystatechange; 
xhr.open( ‘GET” , ‘minimal_longpoll.php?t=” + 
(new Date().getTime())); 
xhr.send(null); 
} 


var s = 
setTimeout(start, 100); 

document.getElementById( ‘x” ).innerHTML = "Started!"; 
</script> 


nn 。 
3» 


</body> 
</html> 


个 .[1] 
这 完全 取 
想 要 了 


从 start() 函数 开始 研究 这 段 源 代码 ， 这 个 函数 里 初始 化 了 一 个 长 轮 询 请 求 。 首 先 创建 
一 个 XMLHttpRequest 对 象 ， 如 果 是 正 浏 览 器 ， 就 创建 一 个 Msxml2.XMLHTTP ActiveX 
对 象 。 这 两 个 对 象 的 国 数 和 行为 都 是 一 样 的 ， 所 以 其 他 的 代码 都 一 样 。 下 一 行 的 xhr. 
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onreadystatechange = onreadystatechange; 指定 要 调用 的 回调 函数 名 。 顺 便 插 一 句 ， 我 们 
可 能 用 了 jQuery， 从 而 不 用 关心 Ajax 复杂 的 创建 过 程 。 但 这 里 还 没有 那么 复杂 ， 只 是 多 
了 两 三 行 代码 而 已 。 





xhr.open 用 以 指明 从 哪里 获取 数据 ，xhr.send() 则 启动 这 个 请 求 。( 在 一 些 浏览 器 上 ， 需 
要 显 式 地 给 send() 传人 一 个 参数 nuLL) 。 








本 章 的 开头 曾 提 到 ， 要 让 长 轮 询 能 在 所 有 浏览 器 上 运行 需要 费 些 周 折 。 第 一 个 要 解决 的 问 
题 就 是 一 些 浏览 器 (比如 Andorid 默认 浏览 器 ) 会 缓存 Ajax 请 求 。 要 避免 这 种 情况 ， 需 要 
在 URL 上 附加 一 点 东西 。 一 种 简单 的 方式 就 是 使 用 当前 时 间 惟 ， 也 就 是 从 1970 年 到 现在 
的 毫秒 数 。 


对 于 IEGBIE7， 还 要 注意 另 一 点 : 需要 为 每 一 个 请 求 创建 一 个 新 的 XHR 对 象 。 如 果 只 创建 
一 次 XHR 对 象 ， 然 后 每 次 发 起 一 个 长 轮 询 请 求 时 再 调用 一 次 send()， 这 几乎 在 所 有 浏览 
器 上 都 可 运行 ， 除了 IE7 以 及 更 早 版 本 。 但 是 每 次 创建 一 个 新 对 象 ， 可 以 在 任何 浏览 器 上 
运行 。 在 所 有 浏览 器 上 都 这 么 做 ， 就 不 会 再 有 什么 麻烦 。 












































另 一 个 费 点 周折 的 地 方 是 第 一 次 调用 start()。 需 要 用 一 个 setTimeout() 来 增加 一 个 100 
毫秒 的 延 时 ， 而 不 是 直接 调用 。 至 少 在 一 些 版 本 的 Safari 上 需要 这 样 做 。 不 这 样 做 ， 就 会 
一 直 处 在 加 载 状 态 ， 需 要 足够 的 时 间 让 页 面 剩 下 的 部 分 解析 并 达到 就 绪 状 态 (Android 不 
需要 ， 如 果 只 需要 在 Android 上 支持 长 轮 询 ， 可 以 移 除 这 个 100 毫秒 的 延 时 )。 
































接 下 来 介绍 onreadystatechange (“on-ready-state-change”) 尔 数 。 这 是 请 求 进度 的 回调 函 
数 (参见 下 面 的 附注 内 容 )。 这 里 只 需要 关心 readyState 变 成 4 的 情况 ， 因 为 这 意味 着 已 
经 接收 到 新 数据 了， 也 意味 着 服务 端 已 经 关闭 了 这 个 连接 。 























Ajax readyState 


XMLHttpRequest 对 象 可 以 处 在 几 个 不 同 的 状态 (IE 浏览 器 的 MsxmL2.XMLHTTP ActiveX 
对 象 也 一 样 ) 。 通 常 你 不 需要 关心 ， 而 且 如 果 用 jQuery 创建 Ajax 连接 ， 其 至 都 看 不 到 
这 些 状 态 码 。 状 态 码 是 从 0 到 4 的 数字 ， 它 们 的 含义 如 下 : 


0 

请 求 尚 未 开始 。 

1 

已 经 与 服务 器 连接 上 了 。 
2 








请 求 (以 及 任何 POST 数据 ) 已 经 发 送 到 服务 端 。 





3 

数据 获取 中 。 

4 

已 获取 所 有 数据 并 且 已 关闭 连接 。 


在 长 轮 询 (以 及 短 轮 询 和 普通 的 Ajax 的 使 用 ) 中 ,我 们 忽略 了 除 readyState 变 成 4 
之 外 的 情况 。 确 切 地 说 ，onreadystatechange 是 在 readyState 变 成 4 的 时 候 调 用 的 ， 
下 一 章 会 介绍 一 种 需要 考虑 readyState 3 的 技术 ，onreadystatechange 会 被 调用 多 次 。 
不 同 的 浏览 器 处 理 的 方式 不 同 ， 有些 浏 览 器 会 提供 数据 当前 加 载 的 进度 信息 。 不 同济 
览 器 处 理 readyState 值 为 0、1 和 2 的 情况 不 同 ， 所 以 不 能 总 是 依赖 这 些 值 。 














也 





所 以 ， 每 次 调用 这 个 函数 都 输出 一 个 .， 但 如 果 readyState 还 不 是 4， 就 不 做 别 的 了 。 上 
要 readyState 变 成 了 4， 就 输出 服务 器 发 送 过 来 的 消息 (在 responseText 中 )， 然 后 通过 
调用 start() 开始 下 一 个 长 轮 询 请 求 。 


AAA 


调用 start() 有 一 个 50 毫秒 的 延 时， 还 是 用 setTimeout() 来 做 ， 不 然 一 些 浏览 器 会 搞 混 ， 
并 且 最 终 报 栈 溢 出 错误 。 长 轮 询 是 为 一 些 策 拙 的 浏览 器 做 的 兼容 方案 ， 所 以 大 可 不 必 为 这 
多 出 的 一 点 点 延 时 而 愧 恼 。(Android 还 是 不 需要 这 个 50 毫秒 的 延迟 。) 


已 :AN 人 
6.5 ”优化 长 轮 询 
前 面 提 到 长 轮 询 大 部 分 时 候 都 表现 很 好 ， 但 是 当 事 情 变 得 一 团 粳 时 就 开始 低 效 了 。 如 果 每 
秒 发 送 两 次 更 新 ， 那 每 分 钟 就 要 创建 120 个 HTTP 请 求 。 在 这 种 情况 下 ， 有 两 种 方法 可 以 
用 来 稍稍 降低 负载 。 


第 一 种 方法 很 简单 : 让 客户 端 慢 一 点 。 事 实 上 已 经 这 样 做 了 ， 在 开始 下 一 个 长 轮 询 之 前 有 
一 个 50 毫秒 的 休眠 。 如 果 把 这 个 休眠 时 间 从 50 毫秒 增加 到 1000 毫秒 ， 那 每 分 钟 最 多 要 
创建 的 长 轮 询 请 求 是 60 个 。 考 虑 一 些 网 络 开 销 ， 每 分 钟 最 多 达到 40 到 50 个 。 当 数据 的 
更 新 频率 降低 ， 其 他 的 延迟 问题 就 不 那么 重要 了 ， 获 取 下 一 次 更 新 的 时 间 是 16 秒 以 后 而 
不 是 15 秒 以 后 ， 可 以 把 休眠 的 时 长 想象 为 长 轮 询 〈 零 延迟 ， 可 能 有 大 量 的 请 求 ) 的 极限 
时 间 和 常规 轮 询 〈 可 预见 的 延 羽 ， 可 预见 的 请 求 频率 ) 之 间 的 连续 。 














另 一 种 方案 是 在 服务 端 ， 可 以 为 长 轮 询 的 客户 端 缓冲 数据 ， 以 不 超过 1 秒 1 次 的 频率 给 客 
户 端 发 送 数 据 。 这 怎么 工作 ? 首先， 记录 下 连接 的 时 间 (比如 ，18:30:00.000)。 然 后 ， 假 
设 在 18:30:00.150 时 有 数据 要 发 送 ， 这 时 先 不 发 ， 设 置 一 个 850 毫秒 的 延 时 ,但 在 计时 器 
触发 之 前 比如， 在 18:30:00.900 时 )， 又 有 要 发 给 客户 端的 数据 。 继 续 等 待 ， 再 等 100 毫 
秒 ， 如 果 这 100 毫秒 内 没有 新 数据 ， 那 等 100 毫秒 过 后 发 送 数据 。 这 样 ， 客 户 端 会 收 到 两 
份 在 一 起 的 数据 。 
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另 一 种 情况 ， 如 果 客 户 端 在 18:30:00.000 时 建立 连接 ， 但 第 一 份 数 据 在 18:30:01.100 (请 
求 开 始 后 1.1 秒 后 ) 才 产 生 该 怎么 办 呢 ? 这 种 情况 就 立即 发 送 数据 并 且 关 闭 连 接 。 换 句 话 ， 
人 为 的 延 时 只 会 在 1 秒 的 时 间 内 有 多 个 数据 时 才 会 引入 ， 这 实际 上 意味 着 只 会 在 有 大 量 数 
据 时 放 慢 速度 ， 这 正 是 我 们 想 要 的 。 


做 这 个 方案 ， 建 议 把 发 送 数据 的 最 小 时 间 间 隔 做 成 可 方便 配置 的 ， 这 样 就 可 以 很 容易 地 测 
试 500~2000 毫秒 之 间 的 值 。 


6.6 ”如 果 JavaScript 被 禁用 怎么 办 


如 果 JavaScript 被 禁用 了 ， 那 么 本 章 所 讲 的 都 不 会 运行 了 。 在 这 种 情况 下 ， 运 行 我 们 最 简 
单 的 示例 时 ， 屏 幕 上 会 一 直 是 “Preparing! ， 直 到 终老 。 这 只 不 过 是 它们 应 得 的 。 本 书 其 
他 章节 介绍 的 方案 也 都 不 会 运行 。 



































什么 情况 ? 你 对 这 些 用 户 心 生 怜 司 ? 吓 ， 骗 人 ! 不 过 ， 是 有 一 种 方法 可 以 兼容 这 些 20 
世纪 的 古董 们 。 不 需 修 改 整个 应 用 ， 只 需 修改 minimal longpoll_example.html 文件 ， 在 
<head> 标签 后 添加 下 面 的 代码 : 

















<noscript> 
<meta http-equiv="refresh" content="0;URL=LongpoLL.nojs.php"> 
</noscript> 


因为 包 在 一 对 <noscript> 标签 中 ， 基 本 上 不 会 运行 ， 但 是 ， 那 段 代 码 的 功能 是 在 不 支持 
JavaScript 的 训 览 器 上 跳 转 到 另 一 个 页 面 ， 那 个 页 面 是 PHP 的 ， 不 是 HIML 的 ， 那 个 PHP 
脚本 需要 生成 完整 的 HTML 页 面 ， 而 不 是 像 通过 Ajax 调用 的 脚本 那样 仅仅 是 发 送 该 数据 ， 
它 的 代码 相当 简单 ， 如 下 所 示 : 














<!DOCTYPE htmL> 


<htmL> 
<head> 
<script>window.location.href = "minimal_longpoll_ test.html"</script> 
<meta http-equiv="refresh" content="3"> 
<meta charset="utf-8"/> 
<title>Update test when JS disabled</title> 
<head> 
<body> 
<p><?= date("Y-m-d H:i:s"); ?></p> 
<p>(Enable JavaScript for better responsiveness.)</p> 
</body> 
</html> 














关键 的 一 行 是 <meta http-equiv="refresh"” content="3">， 意 思 是 “3 秒 后 重 载 页 面 "。3 
秒 后 会 创建 一 个 HTTP 请 求 ， 这 个 PHP 脚本 会 再 运行 一 次 并 且 创 建 一 个 新 页 面 ， 显 示 一 个 
新 的 时 间 戳 。 





还 需要 指出 的 是 ， 文 件 顶 部 的 <script> 这 一 行 是 一 个 聪明 的 小 技巧 。 如 果 用 户 只 是 临时 禁 
用 JavaScript， 那 一 旦 启用 JavaScript， 就 会 在 下 一 次 刷新 页 面 时 检测 到 ， 然 后 会 回 到 具有 
完整 实时 更 新 服务 的 网 站 ， 那 里 有 21 世纪 的 人 民 在 张开双 和 臂 欢 迎 。 


6.7 ”将 长 轮 询 移植 到 我 们 的 外 汇 交 易 应 用 


在 第 5 章 的 最 后 ， 我 们 完成 了 一 个 相当 强悍 的 示例 应 用 。 它 能 随机 生成 包含 多 个 字段 的 外 
汇 对 〈 多 路 技术 ) 数据 ， 可 以 给 所 有 接收 到 的 数据 维护 一 套 历史 记录 ， 并 且 对 那 份 历史 记 
录 做 一 些 有 意思 的 事 ， 比 如 图 表 和 表格 。 它 会 在 出 错时 重 连 ,并 且 记 录 下 断 开 时 的 最 后 一 
条 数据 ， 也 可 以 做 定期 的 关闭 和 重 连 。 


很 季 运 ， 把 长 轮 询 移植 到 我 们 的 应 用 并 不 需要 太 多 工作 。 事 实 上 ， 简 单 是 因为 可 以 移植 到 
一 个 分 支 处 理 的 方法 ， 而 这 是 前 面 几 章 所 做 的 所 有 细小 的 设计 策略 的 结果 。 


















































6.7.1 连接 


这 个 外 汇 交 易 应 用 现在 有 一 个 SSE 对 象 ， 它 包含 了 一 个 私有 变量 es 和 一 个 startEventSource() 
函数 。 第 一 个 任务 是 为 长 轮 询 创 建 一 个 对 等 物 '， 下 面 是 给 SSE 对 象 新 增 的 私有 变量 : 

















var xhr = null; 
var longPollTimer = null; 





正如 所 示 ， 这 里 也 有 一 个 保存 计时 器 的 变量 〈 只 会 在 disconnect() 中 用 到 )。 下 面 是 需要 
添加 的 函数 : 








function startLongPoLL() { 
if (window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
xhr.onreadystatechange = longPollOnReadyStateChange; 
var U = url; 
U += "longpoll=1&t=" + (new Date().getTime()); 
xhr .open("GET", Uu); 
if (last_id)xhr.setRequestHeader("Last-Event-ID", last_id) 
xhr.send(nuyull); 

} 

function LongPoLLOnReadyStateChange() { 
if (this.readyState != 4)return; 
LongPoLLTimer = setTimeout(startLongPoll, 50); 
processNonSSE(this.responseText); 








注 1: es 和 xhr 对 象 是 互 斥 的 ， 换 名 话说 ， 如 果 浏 览 器 使 用 es， 那 xhr 就 是 nutt， 如 果 浏 览 器 用 xhr， 那 
es 就 是 nuLL。 所 以 它们 应 该 共用 一 个 变量 名 ， 可 能 叫 server。 我 没有 这 样 做 ， 是 为 了 强调 它们 各 自 
代表 一 个 不 同类 型 的 JavaScript 对 象 。 还 有 一 个 原因 是 ， 它 们 在 关闭 连接 时 调用 的 方法 不 一 样 ， 分 别 


是 es.close() 和 xhr.abort()。 


























向 后 兼容 ， 其 他 数据 推送 策略 | 85 





startLongPoll() 国 数 和 它 的 onreadystatechange 回调 基本 上 和 本 章 前 面 介绍 过 的 函数 一 
样 ， 但 有 如 下 细微 的 区 别 。 


还 

















使 用 全 局 的 url 变量， 而 不 是 将 要 连接 的 URL 进行 硬 编码 。 

当 设 置 好 last_id 之后， 发送 Last-Event-ID 请 求 头 (参见 5.5 节 )。 与 EventSource 不 
同 的 是 ，XMLHttpRequest 能 发 送 HTTP 请 求 头 ( 契 浏览 器 的 ActiveX0bject 也 可 以 )， 
所 以 这 里 用 到 了 这 个 功能 。 

数据 处 理 过 程 会 传送 到 函数 processNonSSE() 中 ， 这 个 随后 会 介绍 。 

longpoll=1 加 到 了 URL 中 ， 这 是 让 服务 端 知道 在 发 送 数据 后 关闭 连接 〈 记 住 ， 在 长 轮 
询 方 案 中 ， 不 关闭 连接 浏览 器 收 不 到 数据 )。 通 过 使 用 LongpoLL=1， 可 以 用 一 个 后 端 支 
持 多 种 前 端 兼容 方案 。 

保存 了 计时 器 ， 所 以 用 其 他 代码 可 以 取消 计时 器 。 















































需要 再 添加 一 点 东西 ，temporariLyDisconnect() 中 有 两 个 清理 任务 : 





if(keepaliveTimer != null)clearTimeout(keepaliveTimer); 
if(es)es.close(); 


可 以 添加 if(xhr)xhr.abort();， 但 在 下 一 章 还 有 更 多 要 做 ， 所 以 这 里 把 所 有 相关 语句 都 放 
到 一 个 disconnect() 函数 中 ， 并 且 在 temporarilyDisconnect() 中 调用 它 ， 这 两 个 函数 就 
像 下 面 这 样 : 





function disconnect() { 
if (keepaliveTimer) { 
clearTimeout(keepaliveTimer); 
keepaliveTimer = null; 


} 

if (es) { 
es.close(); 
es = null; 

} 

if (xhr) { 
xhr.abort(); 
xhr = null; 


} 
if (longPollTimer) { 
clearTimeout(longPollTimer); 
LongPoLLTimer = null; 
} 
} 
function temporarilyDisconnect(secs) { 
var millisecs = secs * 1000; 
millisecs -= Math.random() * 60000; 
if (millisecs < 0)return; 
disconnect(); 
setTimeout(connect, millisecs); 





6.7.2 ”长 轮 询 和 长 连接 

如 果 还 记得 5.3.2 节 的 “客户 端 "， 应 该 知道 这 里 的 长 连接 机 制 是 当 连 接 20 秒 内 没有 任何 
活动 时 调用 comnect()。 这 在 长 轮 询 方案 中 会 有 问题 ， 因 为 长 轮 询 没有 发 送 长 连接 消息 的 
方式 ， 它 发 完 一 条 消息 就 断 开 了 。 好 吧 ， 当 然 ， 服 务 端 会 很 高 兴 地 发 送 长 连接 消息 ， 但 客 
户 端 收 不 到 。 





在 那些 ready State==3 时 会 调用 onreadystatechanged 的 浏览 器 中 ， 可 以 
接收 到 长 连接 消息 。 但 是 ， 如 果 可 以 那样 做 ， 那 就 可 以 用 下 一 章 会 介绍 的 
XHR 技术 ， 而 不 用 麻烦 现在 的 长 轮 询 技术 。 








如 果 想 了 解 这 一 点 ， 可 以 参见 本 书 源码 的 longpoll_keepalive.php 和 longpoll_ 
keepalive.html 文件 。 服 务 端 每 2 秒 发 送 一 次 长 连接 消息 ， 然 后 10 秒 后 发 送 
真正 的 数据 并 退出 。 在 每 个 浏览 器 上 看 看 能 收 到 什么 ， 以 及 什么 时 候 收 到 。 
在 Android 2.3 中 (长 轮 询 主 要 用 于 支持 移动 网 络 用 户 )， 会 发 现 回 调 函 数 会 
在 readySstate==1 时 立即 调用 ， 然 后 在 接 下 来 的 10 秒 什么 也 没有 ， 最 后 状 
态 码 2、3、4 都 一 起 来 了 。 











所 以 ， 如 果 长 轮 询 在 20 秒 内 没有 发 送 任何 东西 ,发生 了 什么 呢 ? 不 好 的 事 。startLongPoll 
又 被 调用 ， 所 以 在 服务 端 打开 了 两 个 套 接 字 。 如 果 服 务 端 几 个 小 时 不 发 送 任何 东西 ， 会 打 
开 上 百 个 套 接 字 。 真 的 吗 ? 几 百 个 ? 差不多 ! 记 住 ， 如 果 服 务 端 在 发 送 长 连接 消息 ， 套 接 字 
会 全 部 激活 ， 所 以 不 会 被 销毁 。 但 不 会 是 几 百 个 ,因为 浏览 器 有 并 行 连接 数 的 限制 , 一 般 是 
6 个。 从 某 种 意义 上 来 说 ， 这 更 糟 : 过 不 和 久之 后 ， 有 6 个 长 轮 询 连 接 打 开 ， 新 请 求 会 静 静 的 
放 到 一 个 栈 中 ， 并 且 对 那个 服务 器 的 所 有 其 他 通信 (比如 ， 请 求 新 图 片 ， 也 都 会 被 搁置 。 











通过 添加 下 面 加 粗 的 两 行 代码 ， 可 以 避免 那 种 末日 景象 : 


function startLongPoLL() { 
if (xhr)xhr.abort(); 
if (window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
xhr.onreadystatechange = longPollOnReadyStateChange; 
var U = url; 
U += "longpoll=1&t=" + (new Date().getTime()); 
xhr.open("GET", U); 
if (lastId)xhr.setRequestHeader("Last-Event-ID", lastId) 
xhr.send(null); 

} 


function LongPoLLOnReadyStateChange() { 
if (this.readyState != 4)return; 
xhr = null; 
LongPoLLTimer = setTimeout(startLongPoll, 50); 
processNonSSE(this.responseText); 


} 





向 后 兼容 ， 其 他 数据 推送 策略 | 87 


当 带 着 数据 成 功 地 调用 onreadystatechange 国 数 时 ，xhr 被 设置 成 nuLL， 这 与 startLongPoLL() 
中 的 第 一 行 搭配 。 在 那 行 代码 中 ， 如 果 xhr 没有 被 设置 成 muLL， 就 会 调用 abort()。 在 一 般 
操作 中 ， 当 进入 startLongPoll() 时 ，xhr 会 一 直 是 nuLL。 只 有 在 因为 长 连接 计时 器 触发 调用 
时 ，xhr 不 是 nuLL， 代 表 着 上 一 个 连接 。 换 名 话说 ， 如 果 长 轮 询 请 求 在 20 秒 内 没有 应 答 ， 就 
会 取消 它 并 新 建 一 个 请 求 。 


高 兴 吧 ? 我 不 高 兴 。 长 轮 询 变 得 不 那么 像 长 轮 询 了 。 每 20 秒 新 建 一 个 连接 ， 这 个 代价 不 
菲 。 好 吧 ， 长 轮 询 时 永远 不 用 长 连接 如 何 ?为 了 理解 这 好 不 好 ， 想 一 下 用 长 连接 的 初 囊 。 


。 为 了 阻止 中 转 服务 器 或 者 路 由 器 关闭 套 接 字 。 

。 为 了 在 初始 请 求 失败 时 持续 重 试 。 

。 为 了 在 后 端 出 错 但 套 接 字 依然 保持 打开 的 情况 下 进行 检测 。( 这 也 包含 了 浏览 器 出 现 间 
歇 性 的 bug 的 情况 。) 





























第 一 点 要 讨论 的 是 是 否 要 每 20 秒 主动 关闭 套 接 字 。 但 第 二 点 和 第 三 点 理由 充分 ， 在 一 个 产 
品 的 系统 里 不 能 没有 这 些 。 第 三 点 有 些 麻 烦 : 基本 没有 办 法 区 分 服务 器 的 沉默 是 因为 没有 数 
据 要 发 送 ， 还 是 因为 进入 了 一 个 死 循 环 永远 不 会 应 答 。 建 议 在 使 用 长 轮 询 时 ， 用 一 个 更 大 的 
长 连接 计时 器 时 间 ， 因 为 谁 也 不 希望 发 生 那 种 崩溃 ， 对 吧 ? 可 以 简单 地 加 上 下 面 这 行 代码 : 















































function startLongPoll(){ 
keepaliveSecs = 300; 
if(xhr)xhr.abort(); 


关于 第 二 点 (当初 始 请 求 失败 时 重 试 )， 参 见 下 一 节 。 


6.7.3 ”长 轮 询 和 连接 错误 

前 面 的 长 轮 询 代码 写 得 相当 乐观 ， 理 所 当然 地 认为 URL 都 是 对 的 ， 并 且 服 务 器 总 是 
能 接收 请 求 。 如 果 服 务 器 因为 任何 原因 掉 线 了 呢 ? 或 者 URL 错 了 ? 任何 一 种 情况 下 ， 
LongPoLLOnReadyStateChange 都 会 很 快 被 调用 ， 并 且 readyState==4。 可 以 通过 xhr 对 象 的 
status 字段 来 验证 ， 常 见 的 status 码 的 值 如 表 6-1 所 示 。 





















































表 6-1: 常用 的 XMLHttpRequest 状 态 码 


状态 码 含 义 
0 连接 问题 ， 比 如 错误 的 域名 
200 成 功 
304 来 自 缓存 




















401 身份 验证 失败 
404 服务 器 存在 ， 但 找 不 到 文件 
500 服务 器 错误 











希望 永远 不 会 看 到 304， 因 为 那 将 彻底 摧毁 流 式 实时 数据 ! 401 会 被 浏览 器 拦截 ， 要 求 用 
户 提 供 整 数 ， 然 后 再 发 送 一 次 请 求 。 仅 当 用 户 点 击 取 消 时 ， 代 码 才 会 收 到 401 状态 。 
此 ， 除 了 “200”， 其 他 状态 码 都 会 被 当成 错误 处 理 。 所 有 的 错误 中 ， 都 假设 没有 发 送 非 法 
数据 ， 然 后 在 休眠 30 秒 ”后 再 发 一 次 长 轮 询 。 只 有 当 状 态 码 是 200 时 才 使 用 数据 ， 并 立即 
再 发 一 个 长 轮 询 。 以 下 是 修改 之 后 的 onreadystatechange 回调 函数 : 




















function LongPoLLOnReadyStateChange() { 
if (this.readyState != 4)return; 
xhr = mu 
if (this.status == 200) { 
LongPoLLTimer = setTimeout(startLongPoll, 50); 
processNonSSE(this.responseText); 


} 

else { 
consoLe .Log("Connection failure, status:" + this.status); 
disconnect(); 
LongPoLLTimer = setTimeout(startLongPoll, 30000); 

} 


} 


disconnect() 函数 停止 了 两 个 计时 器 (LongpollTimer 和 长 连接 计时 器 ) 以 确保 在 30 秒 内 
没有 其 他 地 方 调用 startLongPol1l()。 


如 果 想 要 变 聪明 ， 有 一 些 状 态 码 包 含 了 有 效 信息 。 比 如 ，301 意思 是 需要 使 
用 一 个 新 的 URL。305 意思 是 应 该 使 用 一 个 代理 ， 如 果 连 接 一 个 第 三 方 系 
统 ， 可 能 需要 处 理 这 些 状 况 ， 和 希望 它们 能 告知 我 们 有 具体 连接 哪个 代理 。 要 注 
意 420 和 429， 那 意味 着 连接 请 求 太 频繁 了 。 

















6.7.4 服务 器 端 
需要 在 之 前 版 本 的 服务 端 脚本 (fx_serverid.php) 基础 上 做 一 些 修改 。 首 先是 要 指定 长 连 
接 ， 在 脚本 的 最 上 面 ， 看 看 客户 端 是 否 在 请 求 "Longpoll"; 

















SGLOBALS[ "is_LongpoLL"] = array_key_exists("LongpoLL" ,S$_POST) 
|| array_key_exists("longpoll",s$_GET); 
$GLOBALS["is_sse"] = !($GLOBALS["is_longpol1l"]); 





给 $is_longpoll 赋值 为 true 或 者 false 的 这 个 语句 很 优雅 紧凑 。 它 只 需 检测 输入 数据 
(不 论 是 GET 数据 还 是 POST 数据 ) 中 longpoll 是 否 存在 ， 而 不 检测 它 的 值 。 第 二 行 代码 
的 意思 是 如 果 不 是 长 轮 询 ， 那 必然 是 SSE。 其 他 的 修改 在 主 循环 的 最 后 面 : 








注 2: 这 里 假设 使 用 长 轮 询 时 ， 发 送 长 连接 消息 的 时 间 间 大 于 30 秒 ， 参 见 6.7.2 节 ， 不 然 长 连接 计时 器 会 首 
先 触发 ， 那 会 被 这 里 的 30 秒 超时 干扰 ， 这 不 太 好 。 
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if($GLOBALS["is_longpoll"])break; 





简短 有 力 ， 就 像 一 只 雄性 蜜蜂 ， 交 付 了 包 事后 就 自杀 


这 里 显 式 地 使 用 了 $GLOBALS[] 数组 。 这 段 代 码 和 主 循环 在 同一 个 作用 域 中 
( 金 局 作用 域 ) ， 本 来 可 以 简单 一 点 直接 给 $is_longpoll 变量 赋值 ， 但 显 式 地 
使 用 $GLOBALS[] 意味 着 ， 当 这 段 代 码 或 者 主 循环 封装 到 函数 中 时 ， 代 码 仍然 
可 以 运行 。 同 时 也 在 说 明 这 段 代码 ， 给 半年 后 要 维护 这 段 代码 的 程序 员 一 个 


显著 的 提醒 :“ 这 些 是 全 局 变量 ”。 























另 一 个 修改 将 会 在 向 后 兼容 方案 中 会 用 到 。 你 可 能 还 记得 前 面 介绍 过 的 下 面 这 些 辅助 函数 : 














function sendData($data){ 
echo "data:"; 
echo json_encode($data)."\n"; 
echo "\n"; 
@flush();@ob_flush(); 

} 

function sendIdAndData($data){ 
$id = $data["rows"][0]["id"]; 
echo "id:".json_encode($id)."\n"; 
sendData($data); 

} 





使 用 向 后 兼容 方案 时 ，SSE 特有 的 那 部 分 (data: 前 缀 ， 末 尾 额外 的 空 行 ， 以 及 单独 的 id: 
行 ) 是 不 需要 的 ， 而 事实 上 它们 有 些 碍 事 。 那 为 何不 去 掉 呢 ? 





function sendData($data) { 
if ($GLOBALS["is_sse"]) echo "data:"; 
echo json_encode($data) . "\n"; 
if ($GLOBALS["is_sse"]) echo "\n"; 
@flush();@ob_flush(); 

} 


function sendIdAndData($data) { 
if ($GLOBALS["is_sse"]) { 
$id = $data["rows"][0]["id"]; 
echo "id:" . json_encode($id) . "\n"; 


} 
sendData($data); 
} 





这 意味 着 对 长 轮 询 来 说 sendIdAndData() 和 sendData() 现在 是 一 样 的 。 这 很 好 。 可 以 在 本 


书 源码 的 fx_server.longpoll.php 找到 这 部 分 代码 (如 果 服 务 端 代码 发 送 retry:， 也 需要 做 
同样 的 事 )。 











如 果 想 要 做 一 个 兼容 ， 不 要 这 样 做 ， 而 应 该 在 客户 端 截 掉 “data:” 那 一 行 的 











“data:”， 并 且 要 忽略 其 他 行 。 





下 面 是 最 后 一 个 修改 。 将 下 面 这 段 代 码 : 


header("Content-Type: text/event-stream"); 


替换 成 `， 


if($GLOBALS["is_sse"])header("Content-Type: text/event-stream"); 
else header("Content-Type: text/plain"); 


6.7.5 Oey 


回 到 前 端 以 及 前 面 介绍 过 的 processNonSSE() 函数 。 这 个 函数 在 下 一 章 也 会 用 到 ， 


ee 


function processNonSSE(msg) { 
var lines = msg.split(/\n/); 
for (var ix in lines) { 
var s = lines[ix]; 
if (s.length == 0)continue; 
if (s[0] != "{") { 
s = s.substring(s.indexOof("{")); 
if (s.Length == 0)continue; 
} 


processOneLine(s); 


} 


为 了 把 第 一 项 工作 看 得 更 清楚 ， 下 面 提供 一 个 简化 的 版 本 : 


function processNonSSE(msg) { 
var lines = msg.split(/\n/); 
for (var ix in lines) { 
processOneLine(lines[ix]); 
} 
} 


它 会 做 


SSE 协议 总 是 一 次 给 回调 函数 一 条 消息 ,长 轮 询 可 能 会 一 次 给 多 条 消息 *。 所 以 前 面 的 代码 



































注 3: 你 是 否认 为 Content-Type 应 该 是 application/json 而 不 是 text/plain ? 我 们 此 处 写 的 代码 是 为 那些 
处 在 崩溃 边缘 的 浏览 器 设计 的 一 种 变通 方案 。 现 在 不 是 语义 化 网 络 演说 的 时 刻 。 更 严格 地 说 ， 这 里 发 
送 的 数据 并 不 完全 是 JSON 格式 。 将 多 条 数据 一 起 发 送 时 ,数据 其 实 是 两 条 以 LF 隔 开 的 JSON 字符 串 。 
每 一 条 都 只 在 process0neLine() 函数 中 转化 为 JSON 对 象 。 
注 4: 好 吧 , fx_server.longpoll.php 没有 发 送 多 条 消息 。 但 它 可 以 , 参见 6.5 节 。 在 下 一 章 , 会 发 送 多 条 消息 ， 
不 论 我 们 是 否 愿 意 。 
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把 它们 分 割 成 独立 的 行 ， 然 后 就 可 以 分 别处 理 它们 ， 但 这 个 简化 的 版 本 大 不 成 熟 而 且 危险 。 








我 们 的 应 用 协议 确实 是 每 条 消息 一 个 JSON 对 象 ， 也 必须 是 一 行 (CR 和 LF 需要 转 义 成 
JSON 格式 )。 但 还 记得 SSE 协议 吗 ” 它 用 一 个 空 行 结束 一 条 消息 。 所 以 接 下 来 要 做 的 事 是 
找到 空 行 (if(s.Length == 0)) 并 将 它们 清除 (continue)。 





if(s[8]!="{") 这 个 代码 块 是 做 什么 的 呢 ? 这 是 脏 数据 防御 。process_one_Line() 期 待 收 
到 JSON 格式 字符 串 ， 完 整 的 JSON， 并 且 只 是 JSON。 如 果 是 其 他 什么 东西 ， 解 析 时 会 抛 
出 一 个 异常 。 事 实 上 ， 它 期 望 参数 是 一 个 JSON 对 象 字 符 串 ， 这 意味 着 字符 串 必 须 以 { 开 
始 ， 以 } 结束 。 如 果 在 花 括号 左 侧 有 任何 别 的 东西 (if(s[9] != “"{"))，s.substring(s. 
indexof("{")) 会 把 它 截 掉 ， 如 果 截 掉 之 后 什么 都 不 得了 ， 那 就 完全 忽略 (顺便 说 一 下 ， 这 
个 特别 的 脏 数据 防御 会 在 7.3 节 中 加 以 介绍 ， 我 还 没 看 到 长 轮 询 会 触发 它 ) 。 


6.7.6 接 起 来 
最 后 一 步 很 简单 ， 把 下 面 加 粗 的 一 行 添 加 到 connectO 中 ， 然 后 可 以 在 不 支持 SSE 的 浏览 
器 上 测试 一 下 : 























function connect() { 
gotActivity(); 
if (window.EventSource)start eventsource(); 
else startLongPoll(); 

} 


如 何在 支持 SSE 的 浏览 器 上 测试 长 轮 询 (或 者 其 他 后 面 要 介绍 的 兼容 方案 ) 呢 ? 建议 加 一 
些 临 时 代码 ， 而 不 是 注释 掉 SSE 相关 代码 ， 如 下 所 示 : 





function connect() { 
gotActivity(); 


if (true)startLongPoLL(); else // 临时 代码 


if (window.EventSource)start eventsource(); 
else startLongPoll(); 
} 





我 喜欢 在 前 后 都 加 上 空 行 和 注释 ， 让 它 更 突出 ， 以 免 遗 忘 ( 在 仅 _client.longpoll.html 文件 
中 有 这 段 强制 使 用 长 轮 询 的 代码 ， 可 以 把 它 移 除 来 检验 一 下 )。 


6.7.7 IE8 及 更 早 版 本 

到 目前 为 止 ， 我 们 创建 的 代码 几乎 可 以 在 任何 浏览 器 上 运行 ， 包括 Android 2.x 的 内 置 浏 
览 器 。 但 是 ， 这 种 代码 在 IE8 上 无 法 运行 。IE8 唯一 的 问题 是 不 支持 0bject.keys (用 于 
4.4 市 介绍 过 的 makeHistoryTbody() 函数 中 )。 可 以 把 下 面 这 段 代 码 插 到 <head> 标签 内 来 使 
IE8 支持 : 








92 | 第 6 章 


<script> 
Object.keys = Object.keys || function (o, k, r) { 


r= []; 
for (k in o)if (o.hasOwnpProperty(k))r.push(k); 
return r; 
} 
</script> 


如 果 浏 览 器 原生 支持 0bject.keys， 就 会 使 用 0bject.keys=0bject.keys， 否 则 就 会 给 
0bject.keys 赋予 一 个 简单 的 函数 。 这 个 函数 会 帝 历 传 入 对 象 的 属性 ， 并 把 它们 添加 到 一 
个 数据 组 中 。 调 用 hasownProperty 是 为 避免 遍历 到 0bject 原型 的 属性 。 想 要 更 深入 地 了 
解 ， 可 以 上 网 搜 一 下 或 者 找 一 本 JavaScript 方面 的 书 看 一 看 。 




















6.7.8 1E7 及 其 更 早 版 本 

IE6、IE7 和 IE8 都 不 支持 0bject.keys， 而 IE6 和 IE7 连 JSON 都 还 不 支持 。 现 代 浏 览 器 
(包括 IE8 及 其 以 后 版 本 ) 都 内 置 了 JSON 对 象 ， 并 提供 了 parse() 和 stringify() 方法 。 
我 们 的 代码 只 需 用 到 JSON.parse()， 所 以 如 果 很 在 意 带 宽 ， 可 以 放弃 这 套 方 案 。 不过， 这 
只 会 影响 下 6 和 正 7 的 用 户 。 他 们 肯定 很 高 兴 能 找到 一 个 仍然 支持 他 们 浏览 器 的 网 站 ， 而 
不 会 介意 额外 加 载 一 个 文件 ， 这 里 会 使 用 已 经 可 用 的 json2.js 文件 。 
































这 个 文件 可 以 在 本 书 源码 中 找到 ， 也 可 以 从 https://github.com/douglascrockford/ 
JSON-js 获取 。 








事实 上 我 在 使 用 最 小 化 的 版 本 ， 文 件 大 小 从 17 530 字 刷 缩减 到 了 3377 字 市 。 


现在 ，IE6 和 IE7 的 用 户 占 比 很 小 ， 没 有 必要 让 绝 大 多 数 用 户 也 来 下 载 一 个 他 们 不 需要 的 
补丁 文件 (加载 了 也 没有 关系 ， 因 为 这 会 在 不 支持 JSON 的 浏览 器 中 创建 JSON 对 象 ， 但 
这 是 在 浪费 带宽 )。 这 里 用 到 了 下 特有 的 版 本 检测 ， 它 是 下 才 有 的 特性 (下 10 之 后 移 除 
了 这 个 特性 ) ， 但 这 很 适用 我 们 的 目的 : 





<!--[if Lte IE 7]> 
<script src="json2.min.js"></script> 
<![endif]--> 
































IE7 及 其 更 早 版 本 会 处 理 那 段 <script>， 然 后 加 载 并 运行 json2.min.js。IE8 和 IE9 会 处 理 
<!--[if lte IE 7]>...<![endif]--> 命令 ,但 不 会 做 任何 事情 ， 其 他 浏览 器 直接 把 它 当 成 
一 个 注释 完全 忽略 。 


总 地 来 说 ， 对 于 所 有 现代 浏览 器 ， 包 括 IE9 及 之 后 的 版 本 ， 这 里 浪费 了 198 字 节 来 给 IE8 
及 其 更 早 版 本 打 补 丁 。IE6 和 IE7 需要 额外 加 载 3377 字 节 。 
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6.8 ” 电 昨 曲折 的 轮 询 


本 章 介绍 了 可 以 用 作 SSE 替代 方案 的 一 种 更 原始 的 机 制 。 如 果 只 需要 数据 快照 (相对 于 完 
整 历史 记录 来 说 )， 或 者 延迟 不 是 很 重要 (比如 ， 如 果 可 以 接受 每 5 分 钟 收 到 一 批 “ 过 期 
的 ”数据 ， 这 样 客户 端 就 不 会 一 直 占 用 一 个 打开 的 套 接 字 )， 常 规 轮 询 有 时 可 能 比 SSE 更 
好 。 然 后 我 们 介绍 了 长 轮 询 。 它 最 大 的 优势 是 可 以 在 任何 支持 Ajax 的 操作 系统 /浏览 器 上 
运行 ， 而 如 今 这 种 操作 系统 /浏览 妖 几乎 毅 地 都 是 。 它 的 劣势 在 于 要 为 每 一 条 消息 新 建 一 
个 HTTP 请 求 。 好 消息 是 ， 在 一 些 浏 览 器 上 有 更 高 效 的 选择 ,这 是 下 一 章 要 讨论 的 主题 。 























上 一 章 介绍 了 长 轮 询 ， 我 们 将 它 视 为 一 种 从 服务 端 向 不 支持 SSE 的 客户 器 推送 数据 的 方 
案 。 与 SSE 相 比 ， 它 的 优势 在 于 几乎 可 以 在 任何 地 方 运行 ， 劣 势 在 于 处 理 频 率 较 高 的 数据 
更 新 时 ， 比 SSE 稍微 多 出 的 那 一 点 延迟 和 带宽 会 变 得 很 显著 。 本 章 会 介绍 两 种 替代 方案 ， 
它们 在 延迟 和 带宽 方面 的 表现 几乎 和 SSE 一 样 好 。 











第 一 种 方案 像 长 轮 询 一 样 会 用 到 Ajax， 但 会 用 readystate == 3 而 不 是 readyState == 4。 
概括 来 说 ， 这 意味 着 会 在 连接 还 没 关 闭 时 一 块 一 块 地 接收 服务 器 推送 的 每 一 条 数据 ， 而 
不 是 像 长 轮 询 那样 要 等 到 关闭 连接 才能 接收 到 数据 〈 如 果 你 之 间 跳 过 了 6.4 节 的 附注 内 容 
“Ajax readyState” 现 在 可 能 正 是 回顾 Ajax readyState 值 含义 的 好 时 机 )。 





这 是 个 很 好 的 方案 ， 效 率 只 比 SSE 低 一 点 点 ， 所 以 有 点 讽刺 意味 的 是 ， 这 种 方案 却 并 没有 
覆盖 多 少 桌 面 浏 览 器 '。 为 什么 ?因为 大 部 分 支持 它 的 浏览 器 已 经 原生 支持 SSE 了 ! 但 是 ， 
这 种 技术 适用 于 Android 4.x (写作 本 书 的 时 候 ， 它 覆盖 了 大 约 2/3 的 Android 用 户 )。 





第 二 种 向 后 兼容 方案 是 专门 面向 下 8 及 以 上 版 本 的 。 这 个 方案 里 没有 任何 特别 的 正 专 有 特 
性 ， 所 以 奇怪 的 是 ， 它 不 能 在 Firefox、Chrome、Safari 和 Opera 上 运行 ， 或 者 需要 一 些 特 
殊 处 理 才 能 运行 。 但 那些 浏览 器 已 经 原生 支持 SSE， 谁 还 在 意 这 个 呢 ? 关键 在 于 这 项 技术 
支持 IE8/TE9/TE9， 这 使 应 用 的 浏览 器 覆盖 率 又 提高 了 28%”。 





























注 1: 仅 Firefox 3.x 和 Safari 3.x 支持 该 方案 。 
注 2: 这 是 写作 本 书 时 全 球 范 围 的 统计 ， 你 也 可 以 说 第 6 章 介绍 的 长 轮 询 方案 已 经 支持 了 IE8+ 浏览 器 。 确 
切 点 说 ， 它 给 那 28% 的 用 户 提供 了 几乎 和 SSE 一 样 高 效 的 解决 方案 。 
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7.1 共性 


像 在 第 6 章 一 样 ， 在 将 技术 移植 到 外 汇 交 易 应 用 之 前 ， 先 用 一 个 极 简 示 例 来 介绍 这 些 技 
术 。 本 章 将 要 介绍 的 两 种 技术 (XHR 和 iframe) 会 使 用 同一 个 后 端 脚本 ， 参 见 本 书 源 码 的 
abc_stream.php 文件 ， 代 码 如 下 所 示 : 


<?php 
header("Content-Type: text/plain"); 








if (array_key_exists("HTTP_USER_AGENT", $_SERVER) 
&& strpos($_SERVER["HTTP_USER_AGENT"], "Chrome/") !== false) 
echo str_repeat(" ", 1023) . "\n'"; 

@ob_flush();@flush(); 


sch = "A"; 
while (true) { 
echo json_encode($ch . $ch) . "\n"; 
@ob_flush();@flush(); 
if ($ch == "2Z") break; 
++$ch; 
sleep(1); 


?> 


这 里 输出 MIME 类 型 为 text/plain。 注 意 ， 不 能 像 对 SSE 一 样 使 用 text/eventstream， 因 
为 不 支持 SSE 的 浏览 器 不 能 识别 这 种 类 型 ， 会 询问 用 户 是 否 要 把 它 保存 为 一 个 文件 ! 

接 下 来 的 一 行 输出 一 个 刚好 1024 字 节 的 空白 。 只 有 Chrome 浏 览 器 需要 用 到 这 行 代 码 ， 所 
以 这 里 用 了 user-agent 来 检测 (array_key_exists("HTTP_USER_AGENT" ,$_SERVER)， 判 断 是 
否 指定 了 user-agent， 然 后 用 PHP 中 管用 的 字符 串 片 段 匹配 strpos($string,$substring)! 
== false 来 判断 $string 中 是 否 包含 $substring ) 。 


后 面 的 代码 就 简单 了 : 输出 26 个 字符 串 ， 每 次 输出 间隔 1 秒 。26 秒 后 关闭 连接 (这 样 
做 是 方便 观察 关闭 连接 时 浏览 器 如 何 表 现 )。 就 像 前 面 儿童 中 创建 的 SSE 代码 那样 ，@ob_ 
flush();@flush(); 是 为 确保 数据 立即 发 送 ， 而 不 是 进入 缓冲 区 。 























Chrome 自 第 6 版 就 支持 SSE， 并 且 它 是 自动 更 新 的 浏览 器 ， 所 以 实际 上 没 
有 任何 需要 用 到 这 种 向 后 兼容 技术 的 Chrome 浏览 器 。 但 如 果 要 在 Chrome 
上 运行 本 章 的 代码 ， 那 段 生 成 1024 字 节 空白 的 代码 是 必要 的 。 这 也 是 我 想 
要 介绍 的 ， 因 为 这 是 一 种 很 有 用 的 故障 排除 技术 : 当 某 个 浏览 器 上 出 现 问 题 
时 ， 一 堆 空白 经 常 能 创造 奇迹 *。 























注 3: 另外 ， 在 空白 前 面 加 一 些 前 缀 会 大 不 一 样 一 一 这 是 一 种 强烈 的 暗示 : 要 进行 浏览 器 优化 了 ， 尤 其 是 在 
缓存 时 。 关 于 这 一 主题 , 有 一 种 使 XHR 技术 能 在 Android 2.x 上 运行 的 方法 , 而 不 仅仅 是 Android 4.x ! 
把 echo json_encode($ch.s$ch)."\n"; 这 行 代 码 (刚好 输出 3 字 节 ) 修改 为 echo json_encode(S$ch.sch) . 
str_repeat(" ",1921)."\n"; (刚好 输出 1024 字 节 )。 是 的 ，2" 字 节 。 我 觉得 它 看 起 来 像 一 段 缓 冲 ， 但 
这 真 的 是 一 项 令 人 讨厌 的 技术 ， 因 为 发 送 的 每 一 条 消息 都 要 进行 填充 。 如 果 要 发 送 的 消息 刚好 那么 大 ， 
并 且 在 意 延迟 ， 在 意 带宽 ， 并 且 发 送 数 据 的 频率 很 高 (意味 着 在 Andorid 2.x 上 使 用 长 轮 询 会 让 用 户 不 
悦 ) ， 那 么 这 可 能 是 你 想 要 的 方法 。 其 他 情况 下 ， 在 Android 2.x 上 最 好 使 用 长 轮 询 。 
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顺便 说 一 下 ， 本 章 示例 中 的 这 些 缓冲 技巧 都 不 能 在 Opera 12 上 运行 ! (但 
Opera 11.0 之 后 的 版 本 都 支持 SSE， 所 以 可 以 无 视 这 个 问题 。) 


在 前 端 ， 本 章 介 绍 的 这 两 种 技术 的 共同 点 在 于 ， 都 不 会 在 后 端 每 次 发 送 新 消息 时 都 接收 到 
新 消息 。 相 反 ， 会 创建 一 个 很 长 的 字符 串 来 保持 自 连 接 开 始 的 所 有 消息 。 这 个 字符 串 会 
着 时 间 的 消逝 而 变 得 越 来 越 长 ， 从 而 给 我 们 带 来 两 大 挑战 


。 如 何 只 提取 新 消息 ; 
。 如 何 避 免 过 多 得 占用 内 存 。 


对 于 第 一 个 挑战 ， 可 以 使 用 下 面 这 个 函数 ，s 是 到 目前 为 止 所 有 接收 到 的 数据 ，prevoffset 
是 目前 读 取 字符 串 的 索引 (第 一 次 调用 时 是 0) ，catLLback 是 会 处 理 消息 的 函数 。 这 个 函 
数 会 返回 一 个 新 的 处 理 起 始点 ， 这 也 是 下 一 次 调用 会 赋 给 prevoffset 的 值 。 如 果 没 有 新 数 
据 ，prevoffset 的 输入 值 会 被 返回 : 


























function getNewText(s, prevoffset, callback) { 
if (!s)return prevoffset; 
var LastLF = s.lastIindexOf("\n") + 1; 
if (LastLF == 0 || prevOffset == LastLF)return prevoffset; 
var Lines = s.substring(prevoffset, lastLF - 1).split(/\n/); 
for (var ix in lines)callback(lines[ix]); 
return LastLF; // 下 一 次 的 起 始点 
} 


这 也 显示 了 男 一 件 需 要 注意 的 事 (SSE 有 内 置 处 理 ， 而 长 轮 询 也 永远 不 会 有 这 个 问题 ): 可 
能 获得 半 条 消息 。 回 顾 一 下 第 3 章 ， 我 们 确定 了 一 行 一 条 JSON 消息 的 协议 ， 如 果 服 务 端 
发 送 消息 {x":3，y":4}\n， 也 总 是 收 到 消息 {x":3，y":4}\n。 但 这 没有 保证 ， 可 能 接收 
到 的 是 {"x":3,"y。 过 一 会 儿 之 后 ，Ajax 回调 再 次 被 调用 ， 这 次 接收 到 的 是 ":4}\n， 所 以 s 
等 于 {x":3,"y":4}\n。 当 然 ， 一 旦 知道 可 能 会 发 生 这 种 情况 ， 处 理 起 来 也 很 简单 : 只 需 在 
输入 字符 串 中 找 最 后 一 个 LFE， 并 暂时 忽略 在 那 之 后 的 内 容 。 这 就 是 s.lastIndexof("\n") 
这 段 JavaScript 代码 做 的 事 。(+1 是 因为 它 返回 了 \n 的 索引 ， 下 一 次 需要 从 它 的 下 一 个 字 
符 开始 。) 


通过 比较 prevoffset 和 LastLF， 我 们 可 以 判断 出 是 否 有 新 数据 (意味 着 至 少 有 一 整 行 新 数 
据 )。s.substring(prevOffset,LastLF-1) 只 提取 新 数据 。 然 后 .split(/\n/) 将 它 分 割 成 一 
个 数组 。 最 后 ， 就 能 为 每 一 条 数据 调用 一 次 回调 函数 。 


如 何 应 对 内 存 溢 出 的 挑战 呢 ? 这 涉及 简单 地 监控 字符 串 的 大 小 ， 而 一 旦 它 变 得 相当 大 了 ， 
就 关闭 连接 并 重 连 。 可 以 在 基于 个 案 分 析 的 基础 上 得 出 这 个 “相当 大 ”的 定义 ， 但 我 倾向 
于 使 用 32 768， 除 非 有 更 好 的 不 用 它 的 理由 (什么 是 更 好 的 理由 ?比如 在 发 送 大 块 的 数 
据 ，32 KB 可 能 刚好 是 两 到 三 条 消息 的 大 小 )。 这 在 XHR 和 iframe 方案 的 实现 中 没有 介 
绍 ， 但 会 在 本 章 后 面 移植 到 外 汇 交易 应 用 时 介绍 。 










































































7.2 XHR 


如 果 你 已 经 研究 过 长 轮 询 的 代码 ， 那 就 没有 多 少 要 讲 的 新 内 容 。 这 里 准备 了 一 个 XMLHttp- 





Request 对 象 (因为 这 段 代 码 不 会 与 IE6 兼 容 ， 所 以 不 用 麻烦 去 检测 XMLHttpRequest 是 


大 


否 存在 )， 





连接 到 abc_stream.php 文件 ， 并 且 设 置 了 onreadystatechange() 所 


函数 。 为 了 能 


在 Safari 上 使 用 (就 像 在 长 轮 询 代码 中 做 的 那样 )， 调 用 延 时 50 毫秒 的 send()， 如 果 不 





这 样 做 也 可 以 ， 
prevoffset 的 自 定义 变量 





现在 详细 地 介绍 一 下 onreadystatechange 函数 。 它 会 
(用 <pre> 就 能 看 到 返回 数据 的 原始 格式 )。 








建 一 条 日 志 ， 附 加 到 <pre id="x"> 
下 ， 如 果 调 用 时 不 传人 新 数据 内 容 ， 就 会 立即 返回 


但 鼠标 指针 就 会 一 直 在 “转圈 圈 。 








用 了 getNewText()， 这 是 本 章 前 面 创建 的 。 它 会 
中 ， 代 码 如 下 所 示 : 











<!DOCTYPE htmL> 

<htmL> 

<head> 
<meta charset="utf-8"/> 
<title>Simple XHR Streaming Test</title> 
<script> 


我 们 还 给 xhr 对 象 添加 了 一 个 名 为 


做 两 件 事 。 首 先 ， 每 次 被 调用 时 都 创 
顺便 说 一 
函数 的 最 后 一 行 


。 onreadystatechangeE 


将 最 新 收 到 的 数据 填充 到 <p id="latest"> 


function getNewText(s, prevoffset, callback) { 


if (!s)return prevoffset; 
var lastLF = 


if (lastLF == 0 || prevoffset == 


s.lastIndexOf("\n") + 1; 
LastLF)return prevoffset; 


var Lines = s.substring(prevoffset, lastLF - 1).split(/\n/); 
for (var ix in lines)callback(lines[ix]); 


return LastLF; // 下 一 次 的 起 始点 
} 
function process(line) { 
document .getElementById("latest") 
} 
</script> 
</head> 
<body> 
<p id="latest">Preparing.. 
<hr/> 
<pre id= 
<script> 
var 
var 
xhr. 
xhr. 
Xhrs 


.</p> 


x">Preparing...</pre> 


SE ""; S2Priev 三 

xhr = new XMLHttpRequest(); 

prevoffset = 0; 

open("GET", "abc_stream.php"); 

onreadystatechange = function () { 

var s2 = this.readyState + ":" + 
this.status + ":" 

if (s2 == s2prev)return; 

s2prev = s2; 

s += S2 + "<br/>\n"; 


nn 。 
了 


.innerHTML = 


Line 


+ this.responseText; 





document .getELementById("x") .LinnerHTML = s; 
this.prevoffset = getNewText( 
this.responseText, this.prevoffset, process); 


}; 


setTimeout(function () {xhr.send(null)}, 50); 


</script> 
</body> 
</html> 


所 以 ， 把 simple_xhr_test.html 和 abc_stream.php 放 到 同一 个 目录 中 ， 然 后 在 支持 的 浏览 器 
上 打开 ,会 看 到 下 面 的 内 容 : 


"Ce" 


0: 


2:200: 


3:200:"AA" 


3:200:"AA" 


"BB" 


3:200:"AA" 


"BB" 
"ce" 


26 秒 之 后 ， 会 在 屏幕 顶部 看 到 "Zz"， 在 屏幕 底 部 ， 会 看 到 下 面 这 两 部 分 : 


3:200:"AA" 


"BB" 
"ce" 
"pp" 


yy" 
"77" 


4:200:"AA" 


"BB" 
"Ce" 
"pp" 


yy" 
"77" 





可 以 看 到 在 readyState==3 状态 下 接收 到 了 "AA" 到 "zz" 的 所 有 内 容 。 当 后 端 服务 关闭 连 
接 时 ， 也 会 收 到 一 个 readyState==4 的 信号 。 





现在 是 时 候 指 


4， 在 大 部 分 浏 


NA Dm 


vi 


上 ， 直 接 打开 abc_stream.php 文 付 





F 会 有 令 人 惊讶 的 表现 : 


不 会 看 到 "AA"， 然 后 "AA"”"BB8"， 而 是 26 秒 什么 也 不 做 ， 然 后 突然 显示 从 "AA" 到 "77" 的 
所 有 内 容 。 只 有 在 用 XMLHttpRequest 时 才 会 看 到 部 分 加 载 的 数据 。 事 实 上 ， 这 也 正 是 下 一 














节 介 绍 的 iframe 技术 不 会 在 那些 浏览 器 上 运行 的 原因 。 


7.3 iframe 


上 一 节 介 绍 的 XHR 技术 不 能 在 下 上 运行 ,原因 是 下 在 xhr.readystate 是 4 之 前 不 会 设 
置 xhr.responseText 的 值 | XHR 技术 的 要 点 在 于 xhr.readyState 永远 不 会 成 为 4， 所 以 
这 是 个 致命 的 打击 。 不 过 并 不 是 没有 解决 的 办 法 。 在 正中 使 用 的 技巧 是 把 那些 数据 加 载 
到 一 个 动态 创建 的 <iframe>， 然 后 去 查看 这 个 iframe 的 源码 ! 第 一 次 听 到 这 个 想法 的 时 
候 ， 我 兴奋 得 从 椅子 上 跳 起 来 去 向 我 的 猫 解 释 。 是 的 ， 人 们 表达 兴奋 的 方式 不 一 样 ， 事 实 
证 明 ， 猫 也 是 。 


这 种 向 后 兼容 方案 似乎 可 以 在 大 部 分 浏览 器 上 运行 ， 而 不 仅仅 是 各 种 版 本 的 下 ,但 是 不 同 
浏览 器 在 数据 可 用 之 前 ， 要 求 从 服务 器 接收 到 的 数据 量 是 不 一 样 的 。 在 IE6/IE7/TE8 中 ， 达 
到 可 用 状态 只 需 接 收 几 字 节 数据 ， 但 是 除非 消息 很 短 ， 否 则 不 用 担心 这 个 。 


但 是 为 了 在 其 他 浏览 器 上 运行 本 章 的 代码 ， 需 要 做 一 些 额 外 的 特殊 处 理 。Chrome 的 要 求 
似乎 是 1024 字 节 ， 就 像 前 面 介绍 的 XHR 技术 一 样 。abc_stream.php 已 经 为 Chrome 发 送 了 
那么 多 的 空白 。Firefox 需要 2048 字 节 (所 以 刚 开 始 我 还 不 知道 这 套 方案 可 以 在 Firefox 上 
运行 )， 而 XHR 技术 不 需要 这 么 多 。 把 下 面 加 粗 的 代码 添加 到 abc_stream.php 中 ， 就 可 以 
立即 在 Firefox 中 运行 了 : 






































header("Content-Type: text/plain"); 


if (array_key_exists("HTTP_USER_AGENT", $_SERVER) 
&& strpos($_SERVER["HTTP_USER_AGENT"], "Chrome/") !== false) 
echo str_repeat(" ", 1023) . "\n"; 

if (array_key_exists("HTTP_USER_AGENT", $_SERVER) 
&& strpos($_SERVER["HTTP_USER_AGENT"], "Firefox/") !== false) 
echo str_repeat(" ", 2047) . "\n'; 

@ob_flush();@flush(); 


记 住 ,我 没有 把 前 面 的 代码 用 在 外 汇 交易 应 用 中 ， 因 为 Chrome 和 Firefox 绝 
不 需要 用 到 iframe 或 XHR 兼容 方案 ， 它 们 总 是 会 用 原生 SSE。 这 些 技巧 只 
是 为 了 不 必 使 用 正 来 运行 本 节 的 代码 。 








你 是 否 注意 到 ， 我 随便 提 了 一 下 在 IEGIETIE8 中 这 些 数据 是 可 用 的 。 等 等 ， 之 前 我 不 是 说 
过 这 种 技术 只 能 在 IE8 上 运行 吗 ? 问题 在 于 IE7 及 更 早 版 本 不 允许 通过 JavaScript 访问 几 
入 的 iframe 的 内 容 。 下 面 这 段 代 码 可 以 测试 是 否 可 以 访问 iframe 的 内 容 : 








if(window.postMessage){ /* OK */ } 





windows .postMessage 在 IE8 及 以 上 版 本 会 返回 true， 在 下 7 及 更 早 版 本 会 返回 false。 








IE10 及 更 高 版 本 的 开发 者 工具 有 一 个 兼容 模式 ， 它 允许 浏览 器 模拟 IE9、 
IE8 或 人 E7。 当 模拟 IE7 时 ，windows .postMessage 返回 true， 意 味 着 iframe 
方案 似乎 能 在 IE7 上 运行 。 我 相信 这 是 IE10 的 兼容 模式 的 bug 或 局 限 性 ， 


没 别 的 意思 。 


在 一 个 特殊 方面 ，iframe 技术 要 劣 于 XHR 技术 : 我 们 必须 拉 取 。 但 这 和 第 6 章 介绍 的 拉 取 
不 同 ， 因 为 不 是 从 服务 端 拉 取 。 而 是 从 一 个 过 ame 中 拉 取 变化 ， 是 完全 本 地 的 拉 取 ， 并 且 
相对 快捷 轻巧 ， 但 它 仍 然 有 一 些 延迟 。 换 句 话 说 ， 服 务 器 可 以 立即 推送 消息 到 客户 端 ， 但 
客户 端 需要 花 一 点 时 间 发 现 并 处 理 新 消息 。 这 里 的 例子 用 了 setIinterval(...,500)， 那 意味 
着 每 500 毫秒 查找 一 次 新 数据 。 所 以 ， 平 均 延 迟 是 250 毫秒 。 如 果 将 setInterval 的 时 间 间 
隔 减 少 到 100 毫秒 ， 平 均 延 迟 就 减少 到 50 毫秒 。 缺 点 是 客户 端 需要 为 额外 的 拉 取 占用 更 多 
的 CPU 资源 。 你 必须 权衡 一 下 应 用 的 延迟 要 求 和 客户 端 CPU 占用 要 求 。 代 码 如 下 所 示 : 











<!DOCTYPE htmL> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>Simple IFrame-Streaming Test</title> 
<script> 
function getNewText(s, prevoffset, callback) { 
if (!s)return prevoffset; 
var lastLF = s.lastIindexOf("\n") + 1; 
if (LastLF == 0 || prevoffset == LastLF)return prevoffset; 
var lines = s.substring(prevoffset, lastLF - 1).split(/\n/); 
for (var ix in lines)callback(lines[ix]); 
return LastLF; // 下 一 次 的 起 始点 
} 
</script> 
</head> 
<body> 
<p id="latest">Preparing...</p> 
<hr/> 
<pre id="x">Preparing...</pre> 
<script> 
function connectIframe() { 
iframe = document.createElement("iframe"); 
iframe.setAttribute("style", "display: none;"); 
iframe.setAttribute("src", "abc_stream.php"); 
document .body.appendChild(iframe); 
var prevoffset = 0; 
setInterval(function () { 
var s = iframe.contentWindow.document.body.innerHTML; 
prevoffset = getNewText(s, prevoffset, function (line) { 
document.getElementById("latest").innerHTML = line; 
}); 
document .getELementById("x") .innerHTML = s; 
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}, 500); 
} 


if (window.postMessage) { 
document .getELementById("x") .innerHTML = "OK"; 
setTimeout(connectIframe, 100); 


} 
else { 
document.getElementById("x").innerHTML = "Sorry!"; 


} 
</scripts 
</body> 
</html> 

我 们 从 这 段 代 码 的 最 下 面 开 始 查找 window.postMessage， 如 果 存 在 ， 则 调用 connect- 
Iframe()。 这 里 必须 要 有 100 毫秒 的 延 时 ， 不 然 在 创建 ifame 时 会 有 一 个 HTML 解析 
错误 。 在 connectIframe 中 ， 前 4 行动 态 地 创建 了 一 个 <iframe>， 通 过 设置 CSS 样式 为 
display:none 来 使 它 不 可 见 ，src 设置 为 流 式 数 据 源 。 然 后 用 setInterval 来 设置 一 个 常规 
计时 器 ， 并 且 每 500 训 秒 抓 取 iframe 的 内 容 。 就 像 上 一 节 介 绍 的 XHR 的 例子 ， 把 目前 为 
止 收 到 的 所 有 内 容 放 到 "x" 元 素 中 ， 只 把 最 新 的 消息 放 到 "latest" 元 素 中 。 








把 simple_iframe_test.html 放 到 abc_stream.php 所 在 的 目录 并 且 在 IE8 或 更 高 版 浏览 器 中 打 
开 ， 就 可 以 看 到 "latest" 元 素 的 内 容 每 秒 更 新 一 次 。 


7.4 将 XHR/iframe 移 植 到 外 汇 交 易 应 用 


移植 的 步骤 和 第 6 革 介 绍 的 移植 长 轮 询 类 似 。 有 一 些 对 后 端的 细微 修改 ， 并 且 添 加 了 一 些 
类 似 于 本 章 前 面 介绍 过 的 简单 前 端 代码 ， 以 及 把 它们 连接 起 来 的 特性 检测 代码 。 








7.4.1 后 端的 XHR 
还 记得 下 面 这 段 取 自 第 6 章 的 代码 吗 ? 





$GLOBALS["is_longpoll"] = array_key_exists("longpoll", $_POST) 
|| array_key_exists("longpoll", $_GET); 
$GLOBALS["is_sse"] = !($GLOBALS["is_longpoll"]); 


客户 端 (包括 XHR 和 iframe) 会 识别 出 自己 在 用 XHR， 所 以 会 对 其 进行 修改 ， 如 下 所 示 : 


$GLOBALS["is_longpoll"] = array_key_exists("longpoll", $_POST) 
|| array_key_exists("longpoll", $_GET); 
$GLOBALS["is_xhr"] = array_key_exists("xhr", $_P0ST) 
|| array_key_exists("xhr", $_GET); 
$GLOBALS["is_sse"] = !($GLOBALS["is_longpoll"] || $GLOBALS["is_xhr"]); 


服务 器 端 没有 什么 要 做 的 。 推 送 数 据 的 格式 和 使 用 长 轮 询 是 完全 一 样 的 。xhr 基本 上 只 用 于 
设 定 正确 的 MIME 类 型 (text/plain 而 不 是 text/event-stream， 因 为 后 者 会 使 一 些 浏 览 器 询问 




















A 
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用 户 是 否 要 保存 为 文件 )。( 上 面 的 代码 可 以 在 本 书 源码 的 fx_server.xhr.php 文件 中 找到 。) 


7.4.2 ”前 端的 XHR 
将 下 面 这 段 代码 添加 到 fx_client.longpoll.html 文件 中 ， 就 像 上 一 章 末尾 的 那个 文件 一 样 : 








function getNewText(s，prevOffset) { 

if (!s)return prevoffset; 

var LastLF = s.lastIindexOf("\n") + 1; 

if (LastLF == 0 || prevoffset == LastLF)return prevoffset; 
var lines = s.substring(prevoffset, lastLF - 1).split(/\n/); 
for (var ix in Lines)processNonSSE(Lines[ix]); 

return LastLF; // 下 一 次 的 起 点 

} 


function startXHR() { 

if (xhr)xhr.abort(); 

xhr = new XMLHttpRequest(); 

xhr.prevoffset = 0; 

xhr.onreadystatechange = function () { 
this.prevoffset = getNewText( 

this.responseText, this.prevoffset); 

}; 

var U = url; 

U += "xhr=1&t=" + (new Date().getTime()); 

xhr.open("GET", u); 

if (last_id)xhr.setRequestHeader("Last-Event-ID", last_id) 

xhr.send(null); 

} 


getNewText 国 数 和 之 前 看 到 的 一 样 ， 但 这 里 写 死 processNonSSE() 作为 回调 函数 ， 而 不 
是 把 回调 函数 当做 参数 。 这 在 XHR 和 iframe 技术 中 都 适用 (应 该 还 记得 ， 它 也 用 于 长 
轮 询 )。startXHR() 函数 和 本 章 前 面 创建 的 简单 示例 类 似 ， 但 它 确实 更 加 简单 : 没有 报告 
xhr.readyState 各 种 值 的 杂乱 ， 用 一 行 代码 就 可 以 处 理 一 切 。 当 readyState 是 0、1 或 者 
2 时 ，responseText 是 空 的 ， 所 以 getNewText 不 会 做 任何 事情 (并且 返回 0)。 广 意 ， 那 是 
处 理 xhr.responseText 是 null 的 情况 。xhr 是 上 一 章 定 义 的 SSE 对 象 的 一 个 私有 变量 。 



























































如 果 服 务 器 关闭 连接 并 且 readystate 是 4， 那 么 会 出 现 两 种 可 能 的 情况 。 要 么 是 上 一 次 调 
用 onreadystatechange 之 后 没有 新 数据 ， 要 么 有 新 数据 (可 能 之 前 收 到 了 半 条 消息 ， 刚 好 
在 等 剩 下 的 部 分 和 LF)。 不 论 哪 种 情况 ，getNewText() 都 会 做 正确 的 事情 。 它 是 那 种 你 可 
以 带 回 家 见 家 人 的 函数 ， 不 用 担心 它 会 让 你 尴 众 。 











7.4.3 前 端的 iframe 
首先 给 SSE 对 象 添加 一 个 私有 变量 ， 就 放 在 定义 es 和 xhr 的 代码 之 后 : 


var iframe = null; 
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正如 在 前 面 一 章 里 提 到 的 那样 ，es、xhr 以 及 iframe 是 互 斥 的 ， 这 意味 着 它 
们 可 以 都 可 以 被 称 为 server， 或 者 其 他 名 称 ， pe td 为 了 使 
代码 更 清晰 ， 本 书 选择 使 用 3 个 独立 的 私有 变量 。 

















然后 添加 下 面 这 个 函数 : 


function startIframe() { 
var U = url; 
U += "xhr=1&t=" + (new Date().getTime()); 
iframe = document.createElement("iframe"); 
iframe.setAttribute("style", "display: none;"); 
iframe.setAttribute("src", U); 
document .body .appendChild(iframe); 
var prevoffset = 0; 
setInterval(function () { 
if (!iframe.contentWindow.document.body)return; 
var s = iframe.contentWindow.document.body.innerHTML; 
prevoffset = getNewText(s, prevoffset); 
}, 500); 
} 


这 基本 上 和 本 章 前 面 介绍 的 代码 一 样 ， 但 是 使 用 了 全 局 的 URL， 并 删除 了 日 志 的 代码 。 但 
它 要 稍微 做 一 些 优化 ， 以 达到 产品 品质 。 首 先 传送 LastId 变量 (已 经 在 URL 里 了 , 不 是 
通过 请 求 头 )。 接 下 来 要 介绍 的 一 处 修改 是 是 当 第 二 次 调用 这 个 国 数 时 ， 清 理 一 下 前 一 个 调 
用 〈 应 该 还 记得 长 连接 机 制 也 需要 这 样 做 ) : 









































function startIframe() { 
if (iframe)iframe.parentNode.removeChild(iframe); 
if (iframeTimer)clearInterval(iframeTimer); 
var U = url; 
if (last id)yu += "last_id=" 
+ encodeURIComponent(last_id) + "&"; 
U += "xhr=1&t=" + (new Date().getTime()); 
iframe = document.createElement("iframe"); 
iframe.setAttribute("style", "display: none;"); 
iframe.setAttribute("src", u); 
document .body .appendChild(iframe); 
var prevOffset = 0; 
iframeTimer = setInterval(function () { 
var s = iframe.contentWindow.document.body.innerHTML; 
prevoffset = getNewText(s, prevoffset); 
}, 500); 
} 


这 也 需要 添加 一 个 私有 变 var iframeTimer = null;。 


7.4.4” 接 通 XHR 
现在 ，connect() 国 数 如 下 所 示 : 
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function connect() { 
gotActivity(); 
if (window.EventSource)startEventSource(); 
else startLongPoll(); 


} 
添加 下 面 这 行 代码 : 


function connect() { 

gotActivity(); 

if (window.EventSource)startEventSource(); 

else if (window.XMLHttpRequest && 
typeof new XMLHttpRequest().responseType != "undefined") 
startXHR(); 

else startLongPoll(); 


} 


浏览 器 检测 有 一 点 复杂 。 这 里 需要 XMLHttpRequest2 来 支持 运行 。 对 该 函数 的 第 一 部 分 修 
改 会 检测 XMLHttpRequest 是 否定 义 。 几 乎 每 一 个 浏览 器 都 会 因为 它 而 返回 true， 因 为 这 在 
XHR 的 第 一 个 版 本 中 已 经 定义 了 。 标 准 设计 者 给 XHR 加 了 一 堆 新 特性 之 后 ， 没 有 设计 一 
个 增强 的 XMLHttpRequest2 对 象 ， 而 是 仍然 使 用 XMLHttpRequest 这 个 名 称 。 遗 憾 的 是 ， 他 
们 也 没有 设计 任何 类 型 的 版 本 号 ， 而 且 还 没有 任何 直接 体现 XMLHttpRequest2 功能 的 对 象 
可 用 。 




















这 是 在 要 花招 。 所 以 ， 给 我 们 的 测试 方式 恰巧 都 是 一 样 的 : 所 有 在 XMLHttpRequest 对 象 上 
定义 了 responseType 属性 的 浏览 器 “， 都 可 以 在 readyState==3 时 访问 responseText 中 的 
数据 。 








出 于 测试 的 目的 ， 要 强制 支持 SSE 的 浏览 器 使 用 XHR， 将 下 面 这 段 代 码 放 
到 connect() 的 最 上 面 : 





if(true)startXHR();else 





7.4.5 ” 接 通 iframe 

如 果 你 觉得 XHR 的 特性 检测 复杂 ， 说 明 你 不 是 什么 都 没 看 见 。iframe 的 特性 检测 分 为 两 
部 分 。 第 一 部 分 在 HTML 文件 的 顶部 。 上 一 章 介 绍 了 下 专用 的 宏 语 言 。 这 里 用 它 在 IE9 
以 及 更 早 版 本 的 浏览 器 上 设置 一 个 值 为 true 的 JavaScript 全 局 变量 ， 其 他 训 览 器 则 设 为 
faLse。( 没 有 在 IE10 及 之 后 的 版 本 中 使 用 iframe， 是 因为 它们 支持 XHR， 幸 好 正 宏 语 言 
在 下 10 及 之 后 版 本 就 不 支持 了 ! ) 在 HTML 文件 中 靠近 <head> 顶部 的 地 方 ， 添 加 下 面 粗 
体 部 分 的 代码 (其 他 部 分 的 代码 在 fx_client.longpoll.html 文件 中 已 经 有 了 ) : 



































注 4: 好 吧 ， 是 我 在 上 面 尝 试 使 用 过 该 属性 的 所 有 浏览 器 。 记 住 ， 在 现实 世界 中 ， 这 个 向 后 兼容 方案 只 能 用 
于 Android 4.x， 在 Android 4.x 上 ， 这 个 特性 检测 可 以 正常 工作 。 
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<script>var isIE90rEarlier = false;</script> 
<!--[if lte IE 7]> 
<script src="json2.min.js"></script> 
<![endif]--> 
<!--[if lte IE 9]> 
<script> 
isIE9OrEarlier = true; 
</script> 
<![endif]--> 
<script> 
Object.keys = Object.keys || function (0o, k, r){ 
=[ ]; 
for (k in o)if (o.hasOwnProperty(k))r.push(k); 
return r; 
} 


</script> 





现在 有 了 isIE90rEarlier 这 个 新 的 全 局 变量 ， 在 connect() 中 添加 下 面 这 儿 行 代码 : 


function connect() { 
gotActivity(); 
if (window.EventSource)start_eventsource(); 
else if (isIE9OrEarlier) { 
if (window.postMessage)startIframe(); 
else startLongPoll(); 


else if (window.XMLHttpRequest && 
typeof new XMLHttpRequest() .responseType != "undefined") 
startXHR(); 

else startLongPoll(); 

} 


那 段 代码 说 得 很 直 白 : 如 果 是 IE9 及 更 早 版 本 ， 那 就 用 iframe 〈 比 如 正 8 和 IE9， 因 为 只 
有 它们 定义 了 window.postMessage 函数 ) 或 者 长 轮 询 ( 比 如 IE5.5、IE6 和 正 7)。 如 果 是 
IE10 或 者 下 11， 则 使 用 XHR。 








好 人 做 到 底 ， 我 应 该 告诉 你 ， 要 强行 在 支持 SSE 的 浏览 器 中 测试 frame， 把 
下 面 这 一 行 放 到 connect() 的 最 上 面 : 








if(true)startIframe();eLse 


还 有 一 个 修改 : 在 disconnect() 函数 中 再 加 两 段 代码 : 





function disconnect() { 

if (keepaliveTimer) { 
clearTimeout(keepaliveTimer); 
keepaliveTimer = null; 


} 

if (es) { 
es.close(); 
es = null; 





大 
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} 

if (xhr) { 
xhr .abort(); 
xhr nultls 


if (longPollTimer) { 
CLearTimeout(LongPoLLTimer ) ; 
LongPoLLTimer = null; 


if (iframeTimer) { 
clearTimeout(iframeTimer); 
iframeTimer = null; 


} 

if (iframe) { 
iframe.parentNode.removeChild(iframe); 
iframe = null; 


} 


7.5 感谢 内 存 


我 乓 


了 什么 吗 ? 肯定 忘 了 什么 。 噢 ， 我 的 记性 ” 不 太 好 了 …… 对 ， 就 是 它 ! 内 存 管理 ! 


XHR 和 iframe 方案 都 会 保存 服务 器 发 送 的 消息 ， 它 基本 上 就 是 一 个 不 为 人 知 的 重大 消息 。 


这 在 
题 ， 
会 有 





SSE 中 没有 问题 ， 因 为 EventSource 对 象 独立 对 待 每 一 条 消息 ;在 长 轮 询 中 也 不 是 问 
因为 每 条 消息 都 是 一 个 完整 的 链接 。 如 果 运 行 一 个 脚本 足够 长 的 时 间 ，XHR 和 iframe 




















问题 ， 数 据 缓冲 会 越 来 越 大 ， 直 到 拖 垮 客户 端 系统 。 





解决 方案 简单 粗暴 : 当 这 个 重大 消息 变 得 太 大 时 ， 新 建 一 个 连接 。 这 有 一 些 缺 点 ， 坦 率 地 
说 ，SSE 相 比 XHR 兼容 方案 最 大 的 优势 就 是 ， 它 不 存在 这 个 问题 。 在 检测 这 个 缺点 之 前 ， 


来 看 


一 下 代码 。 这 涉及 在 getNewText() (在 XHR 和 iframe 都 有 用 到 ， 但 是 原生 SSE 和 长 


轮 询 没 有 用 到 ) 中 添加 了 加 粗 的 那 部 分 代码 : 


function getNewText(s, prevoffset) { 

var LastLF = s.lastIindexOf("\n") + 1; 

if (LastLF == 0 || prevoffset == LastLF)return prevoffset; 
var lines = s.substring(prevoffset, lastLF - 1).split(/\n/); 
for (var ix in lines)processNonSSE(lines[ix]); 


if (LastLF > 65536) { 
console.log("Received " + lastLF + 
" bytes (" + s.length + "). Will reconnect."); 
disconnect(); 
setTimeout(connect, 1); 


} 


return LastLF; // 下 一 次 的 起 始点 
} 








证 全 





中 文 的 “记性 ”和 “内 存 ” 在 英文 中 是 同一 个 词 memory。 一 一 译 者 注 
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换 名 话说， 一旦 缓冲 区 超过 了 64 KB， 就 会 断 开 连 接 ， 然 后 重 连 。 延 时 1 毫秒 调用 
connect() 是 为 避免 递归 调用 时 潜在 的 问题 。 








第 一 个 要 指出 的 缺点 是 ， 选 择 64 KB 是 随意 的 。 示 例 应 用 达到 这 个 大 小 需要 大 概 2.5 分 钟 。 
如 果 每 条 消息 更 大 ， 或 者 消息 发 送 更 快 ， 可 能 需要 增加 缓冲 大 小 。 如 果 所 有 用 户 都 是 桌面 
用 户 ， 可 以 把 缓冲 增 大 10 倍 甚至 更 多 ， 即 便 是 在 移动 设备 上 ，64 KB 也 不 是 太 大 。 


第 二 个 缺点 是 可 能 会 丢失 半截 消息 ， 记 住 之 前 介绍 过 的 关于 使 用 s.lastIndexof("\n") 
来 处 理 消息 的 讨论 。 这 些 半截 消息 会 比较 罕见 (但 愿 如 此 )， 所 以 可 以 把 这 一 旬 改 成 
if(lastLF > 65536 8&& lastLF == s.length)， 告 诉 它 等 到 一 个 干净 的 点 再 关闭 连接 。 只 需 
记 住 这 一 点 : 这 意味 着 理论 上 它 永 远 不 会 断 开 连接 (引起 内 存 问 题 )。 












































第 三 个 问题 是 和 在 长 轮 询 中 一 样 的 问题 : 可 能 在 断 开 连接 到 下 一 次 连接 的 这 段 时 间 里 错过 
了 一 条 消息 。 可 是 ， 如 果 发 送 接收 到 的 lastId (就 像 在 示例 中 所 做 的 那样 )， 然 后 第 二 个 
和 第 三 个 缺点 就 抵消 了 : 不 会 丢失 任何 东西 ， 只 是 有 一 点 低 效 。 


7.6 ”把 初 窗 中 的 外 汇 交 易 应 用 放 到 床上 


在 前 面 的 五 章 中 ， 我 们 完成 了 外 汇 交 易 应 用 的 开发 : 兼容 99% 以 上 的 浏览 器 ， 为 这 些 浏 览 
器 用 户 使 用 我 们 能 够 找到 的 最 有 效率 的 技术 (如果 和 忘 了 哪些 浏览 器 用 到 哪些 技术 ， 可 以 参 
见 下 面 附 注 内 容 中 的 表 7-1)， 为 一 个 真实 复杂 的 数据 推送 应 用 使 用 最 高 效 的 技术 ， 这 个 应 
用 处 理 了 服务 端 和 套 接 字 离线 、 定 期 关闭 等 问题 。 























第 9 章 介绍 身份 认证 和 其 他 安全 相关 的 问题 时 ， 会 再 次 使 用 这 个 外 汇 交 易 应 用 。 在 此 之 
前 ， 第 8 章 将 介绍 那些 示例 应 用 中 尚未 用 到 的 SSE 的 其 他 一 些 方面 。 























各 自 的 归宿 
表 7-1 总 结 了 浏览 器 检测 的 工作 原理 。 
表 7-1: 不 同 用 户 的 浏览 器 该 用 哪个 start() 函 数 


函数 浏览 





startEventSource() |j。 基 本 上 所 有 的 Firefox 和 Chrome 

。 桌 面 Safari 5.0+ 

。iOS Safari 4.0+ 

。Android 4.4+ (之 前 Chrome 是 默认 浏览 器 ) 
。Android 版 的 Chrome (所 有 版 本 ) 
。Android 版 的 Firefox (所 有 版 本 ) 

。Opera 11.0 以 上 ( 含 11.0) 

。 移 动 版 Opera 11.1 以 上 ( 含 11.1) 

黑莓 7.0 以 上 ( 含 7.0) 








startXHR() *。 IE10+ 

。Firefox 3.6 (以 及 更 早 版 本 ) 

°。 Safari 3.X 

。Android 4.1 到 Android4.3 (除非 Chrome 是 默认 浏览 器 ) 
。 Android 3.x 





startIframe() 。 IE8 
。 IE9 





startLongpoll() 。IE6 

。IE7 

。Android 2.x 

* 前面 没有 列 出 的 其 他 任何 支持 Ajax 的 浏览 器 











(none) 。 任 何 禁 用 JavaScript 的 浏览 器 


* 从 严格 意义 来 说 ， 是 从 Firefox 6 和 Chrome 6 开始 的 ， 但 是 Firefox 自 第 4 版 开始 有 自动 
更 新 , 而 Chrome 自 beta 版 就 有 自动 更 新 , 所 以 有 理由 认为 没 人 在 用 不 支持 SSE 的 版 本 。 


















































第 8 和 章 


关于 SE 的 其 他 标准 





SSE 标准 还 有 一 些 我 之 前 简略 谈 到 的 其 他 特性 ， 本 章 将 对 它们 进行 探讨 。 之 前 没有 介绍 这 
些 特 性 有 两 个 理由 。 首 先 ， 我 们 不 需要 用 到 它们 ! 因为 一 行 一 条 JSON 字符 串 的 设计 决策 ， 
以 及 JSON 对 象 的 自 描述 性 ， 事 件 和 多 行 特 性 都 用 不 到 。 第 二 个 理由 是 ， 那 会 使 向 后 兼容 
方案 变 得 更 慢 更 复杂 。 从 实用 性 角度 出 发 ， 而 且 无 意 创建 可 供 下 载 的 完美 SSE 代码 ， 可 
以 允许 向 后 兼容 方案 使 用 最 合适 的 协议 。 但 是 了 解 这 些 特性 是 个 好 事 ， 本 章 会 介绍 每 个 特 
性 ， 介 绍 如 何 使 用 它们 ， 甚 至 提供 了 一 些 如 何在 向 后 兼容 方案 中 实现 的 提示 。 


8.1 请 求 头 


下 面 是 一 个 简单 的 脚本 (可 以 在 本 书 源码 的 log_headers.html 文件 中 找到 ) : 











<html> 
<head> 
<title>Logging test</title> 
</head> 
<body> 
<script> 
var es = new EventSource("log_ headers.php"); 
</script> 
</body> 
</html> 


这 显示 了 一 个 SSE 脚本 可 以 有 多 小 。 当 然 ， 这 绝对 没有 在 前 端 做 任何 事情 。 下 面 是 与 之 对 
应 的 后 端 代码 : 


111 


<?php 


$SSE = (@$_SERVER["HTTP_ACCEPT"] == "text/event-stream"); 


if ($SSE) 

header("Content-Type: text/event-stream"); 
else 

header("Content-Type: text/plain"); 


file put_contents("tmp.log", print_r($_SERVER, true)); 


?> 


这 段 代码 也 短 得 让 人 不 好 意思 了 。 它 只 是 把 超 全 局 变量 $_SERVER 中 的 所 有 东西 简单 地 写 到 
一 个 mplog 文件 中 。 这 里 包含 了 浏览 器 发 送 到 服务 器 的 HTTP 请 求 头 ,通常 这 是 我 们 感 
兴趣 的 东西 。tmp.log 只 显示 了 最 近 的 请 求 ， 每 次 都 会 被 重 写 。 可 以 在 你 的 目标 浏览 器 上 斌 
一 下 它 。 


之 所 以 首先 介绍 这 个 , 是 因 


如 果 通 过 网 络 服务 器 访问 时 没有 创建 tmp.log 文件 ， 可 能 是 因为 写 权 限 的 问 
题 。 如 果 服 务 器 是 Unix 系统 ， 在 命令 行 运行 touch tmp.log 和 chmod 666 tmp. 





log 之 后 再 试 一 下 。 




















这 一 行 放 到 任何 脚本 代码 的 上 面 ， 以 诊断 问题 或 只 是 帮助 理解 。 











民 相 











如 果 想 


但 是 ， 更 好 的 方式 是 显示 phpinfo() 的 输 昌 











看 COOKIES、POST 以 及 其 他 任何 超 全 局 变量 的 内 容 ， 尽 管 也 把 它们 加 到 脚本 里 。 

















HH。 图 8-1 显示 了 这 些 内 容 的 摘要 ， 


为 可 以 把 file_put_contents("tmp.1log",print_r($_SERVER, true)); 








PHP 特有 的 ， 这 里 就 不 介绍 了 。 如 果 有 兴趣 ， 可 以 看 一 下 show_phpinfo.php 文件 。 








show_phpinfo.php 脚本 抓 取 了 phpinfo() 输出 (HTML 格式 )， 并 对 其 做 了 一 点 格式 化 ， 然 


后 以 一 个 SSE 块 输 昌 








上 。 它 包 右 在 一 个 JSON 字符 串 中 ， 以 确保 换行 符 不 会 引发 问题 (这 段 


代码 也 适用 于 XHR 和 长 轮 询 方案 ， 也 包含 了 一 些 本 章 出 现 的 请 求 头 ， 以 使 它 更 广泛 地 使 
用 )。 前 端 代码 如 下 所 示 : 


<html> 
<head> 
<title>PHPINfo Test</title> 
</head> 
<body> 
<div id="x">(loading...)</div> 
<script> 
var es = new EventSource("show_phpinfo.php"); 
es.addEventListener("message", function (e) { 
var s = JSON.parse(e.data); 
document.getElementById("x").innerHTML = s; 
}, false); 
</script> 
</body> 
</html> 





N12 


| 个 六 


条 8 重 


如 果 只 看 见 “(loading…)”， 可 能 是 访问 show_phpinfo.php 时 出 现 了 “403 Forbidden” 错 
误 ， 下 面 的 警告 解释 了 原因 。 








bcmath 








calendar 














图 8-1: show_phpinfo.html 的 示例 输出 


不 要 把 这 段 专 用 的 脚本 放 到 任何 产品 服务 器 上 。phpinfo() 输出 了 系统 非常 
详细 的 细节 ， 有 些 可 能 会 被 黑客 利用 。 


因为 读者 可 能 在 读本 章 之 前 就 把 本 书 源码 上 传 到 了 他 们 的 网 络 服务 器 ， 里 面 
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包含 了 一 个 专门 阻止 访问 show_phpinfo.php 的 .htaccess 文件 ， 所 使 用 的 代码 
块 如 下 所 示 : 
<Files "show_phpinfo.php"> 


deny from all 
</Files> 


在 一 个 你 坚信 外 面 的 世界 不 会 访问 到 的 系统 中 ， 大 可 从 g.htaccess 文件 中 删 
除 那 段 代 码 。 





注意 ，.htaccess 文件 只 会 在 Apache 配置 它们 可 用 时 才 会 生效 ， 有 时 会 因 性 能 
或 中 央 控 制 的 原因 禁用 。 将 Apache 配置 文件 中 AllowOverride 改 为 All， 或 
者 至 少 改 为 AllowOverride AuthConfig Limit， 就 可 以 使 .htaccess 生效 。 更 多 
信息 参见 https://httpd.apache.org/docs/2.0/mod/core.html#allowoverride。 











更 多 关于 使 用 .htaccess 文件 控制 SSE 资源 的 访问 ， 参 见 9.2 节 。 











其 他 大 部 分 语言 同样 支持 访问 请 求 头 。 下 面 是 在 一 个 单独 的 Nodejs 服务 器 上 实现 的 代码 : 








var http = require("http"); 


http.createServer(function (request, response) { 
console.log(request.method + " " + request.url); 
console.log(request.headers); 


if (request.url != "/sse") { 
response.end("<html>" + 
"<head><title>Logging test</title></head>" + 
"<body><script>" + 
"var es = new EventSource('/sse');" + 
"</script></body></html>\n"); 
return; 


} 
response.writeHead(200, 

{ "Content-Type": "text/plain" }); 
response.end(); 
}).listen(1234); 


运行 node log_headers.node.js 启动 它 ， 它 会 监听 服务 器 上 所 有 全 的 1234 端口 。 关 键 的 一 
行 是 console.1log(request.headers);， 它 输出 到 控制 台 ， 但 也 可 以 很 简单 地 修改 成 输出 到 
一 个 日 志文 件 ， 就 像 PHP 例子 所 做 的 那样 。 


脚本 剩 下 的 部 分 是 返回 可 以 再 次 用 SSE 访问 服务 器 的 HTML 文件 框架 。 还 有 一 行 你 可 能 有 闪 
趣 的 代码 ，console.log(request.method+" "+request.url);， 它 显示 了 被 请 求 的 是 哪个 文件 。 


8.2 事件 


正如 在 本 书 中 所 看 到 的 那样 ， 服 务 器 给 发 送 的 数据 加 了 data: 前 级 。 然 后 客户 端 通 过 为 
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message 事件 创建 一 个 处 理 程序 接收 这 些 数据 ; 


es.addEventListener("message", function(e){ 

var d = JSON.parse(e.data); 

document .getELementById(d.symboL) .innerHTML = d.bid; 
},false); 





结果 表明 ，message 是 默认 的 ， 可 以 用 这 种 方式 让 服务 器 标记 每 一 行 ， 这 样 就 可 以 在 前 端 
用 一 个 不 同 的 函数 来 处 理 。 

标记 方式 是 给 一 行 数据 加 上 event: 前 级 ， 然 后 在 客户 端 通过 指定 这 类 事件 的 处 理 程序 来 处 
理 数据 。 看 一 下 例子 就 很 清楚 了 。 回 到 外 汇 交 易 应 用 ， 发 送 的 数据 可 能 如 下 所 示 : 




















event:AUD/GBP 
data:{"timestamp":"2014-02-28 06:49:55.081","bid":"1.47219","ask":"1.47239"} 


event:USD/JPY 
data:{"timestamp":"2014-02-28 06:49:56.222","bid":"94.956","ask":"94.966"} 


event:EUR/USD 
data:{"timestamp":"2014-02-28 06:49:56.790","bid":"1.30931","ask":"1.30941"} 


event:EUR/USD 
data:{"timestamp":"2014-02-28 06:49:57.002","bid":"1.30983","ask":"1.30993"} 


event:EUR/USD 
data:{"timestamp":"2014-02-28 06:49:57.450","bid":"1.30972","ask":"1.30982"} 


event:AUD/GBP 
data:{"timestamp":"2014-02-28 06:49:57.987","bid":"1.47235","ask":"1.47255"} 


event:AUD/GBP 
data:{"timestamp":"2014-02-28 06:49:58.345","bid":"1.47129","ask":"1.47149"} 

















将 这 上段 代码 与 3.5 节 中 的 第 一 段 代 码 对 比 一 下 。 如 果 很 在 意 带宽 ， 像 这 样 使 用 event:， 每 
条 消息 好 像 可 以 节省 6 字 节 。 然 而 ， 通 过 把 原来 JSON 里 的 symbol 修改 为 s， 可 能 仅 有 1 
字 节 的 区 别 。 而 如 果 使 用 CVS 格式 代替 JSON， 那 么 使 用 event: 可 能 要 多 消耗 7 字 节 。 

















事件 名 称 可 以 是 除 回 车 和 换行 之 外 的 任何 Unicode 编码 的 字符 。 如 果 需 要 多 
行事 件 名 称 ， 先 照 照 镜子 问 问 自己 :“ 真 的 吗 ? ”如 果 答 案 仍然 是 肯定 的 ， 
那 就 要 制定 一 套 转 义 机 制 ， 比 如 ， 将 事件 名 称 转化 为 JSON 格式 ， 然 后 在 调 
用 addEventListener 时 使 用 转化 后 的 事件 名 称 。 





















































在 客户 端 ， 与 之 前 介绍 的 使 用 “信息 ”处 理 程序 不 同 的 是 ， 这 里 为 每 个 可 能 的 “事件 ” 创 
建 了 处 理 程 序 。 在 这 种 情况 下 ， 那 意味 着 一 个 外 汇 对 对 应 一 个 事件 处 理 程序 ， 如 下 所 示 : 


























es.addEventListener("EUR/USD", function (e) { 
var d = JSON.parse(e.data); 
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document .getELementById("EUR/USD" ) .innerHTML 
}, false); 


d.bid; 


es.addEventListener("USD/JPY", function (e) { 
var d = JSON.parse(e.data); 
document .getELementById("USD/JPY") .innerHTML = d.bid; 
}, false); 


es.addEventListener("AUD/GBP", function (e) { 
var d = JSON.parse(e.data); 
document .getELementById("AUD/GBP" ) .innerHTML = d.bid; 
}, false); 


我 确信 这 让 你 打 退 党 鼓 ， 想 要 缴械 投降 了 。 是 的 ， 当 多 路 数据 (如 本 例 中 的 外 汇 对 ) 以 相 
同 的 格式 、 相 同 的 方式 处 理 时 ， 为 每 条 数据 流 使 用 evnet: 的 成 本 要 比 获 益 多 。 这 不 是 个 好 
例子 ， 我 很 抱 娄 。 
































有 更 好 的 例子 吗 ?” 有 一 个 每 个 “事件 ”的 数据 都 将 以 不 同方 式 处 理 的 例子 。 聊 天 应 用 如 
何 ? 可 以 合理 想象 一 下 ， 数 据 流 是 这 样 发 送 的 : 




















event :enter 
data:{id:17653,name:"Sweet Suzy"} 


event:message 
data:{msg:"Hello everyone!",from:17563} 


event:exit 
data:1465 


聊天 数据 以 JSON 格式 发 送 。JSON 对 和 象 有 对 应 实际 聊天 消息 的 msg 字段 和 以 ID 表示 发 送 
者 的 from 字段 。 当 用 户 进 入 聊天 室 时 ， 会 触发 一 个 enter 事件 ， 并 提供 用 户 ID 和 用 户 信 
息 (这 里 只 是 用 户 名 )。 当 用 户 离开 聊天 室 时 ,会 触发 一 个 exit 事件 ， 而 数据 只 是 用 户 的 
数字 形式 ID， 而 不 是 一 个 JSON 对 象 : 








hl 





es.addEventListener("enter", 

function(e){ addMember(JSON.parse(e.data)); },false); 
es.addEventListener("exit", 

function(e){ removeMember(e.data); },false); 
es.addEventListener("message", 

function(e){ addMessage(JSON.parse(e.data)); },false); 





实际 上 使 用 的 是 下 面 的 函数 : 











function addMember(d) { 
members[d.id] = d; 
var img = document.createElement("img"); 


img.id = "member_img ”+ d.id; 
img.alt = d.name; 
img.src = "/img/members/" + d.id + ".png"; 


document .getELementById("memberimg" ) .appendChiLd(Cimg); 
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} 


function removeMember(id) { 
var img = document.getELlementById("member_ img_" + id); 
img.parentNode.removeChild(img); 
delete members[id]; 


3 


function addMessage(d) { 
var msg = document.createElement("div"); 
msg.innerHTML = d.msg; 
document .getELementById("messages" ) .appendChiLd(msg); 


} 





addMessage() 可 能 使 用 了 d.from。 这 里 也 省 略 了 错误 检测 : 把 这 段 代 码 放 
到 实际 产品 中 时 需要 小 心 ， 因 为 这 里 没有 预防 JavaScript 注入 攻击 (虽然 服 
务 端 会 处 理 好 从 聊天 消息 中 移 除 问题 标签 )。 








如 何 使 向 后 兼容 方案 兼容 evnet: 行 ? 一 种 方法 是 在 之 前 介绍 过 的 processNonSSE(msg) 国 
数 中 添加 一 些 代码 (参见 6.7.5 节 )。 这 里 还 需要 一 个 全 局 变量 记录 当前 处 理 的 事件 ， 如 
下 所 示 : 





var currentEvent = null; 


function processNonSSE(msg) { 
var lines = msg.split(/\n/); 
for (var ix in lines) { 
var s = lines[ix]; 
if (s.Length == 0)continuye; 
if (s.indexOof("event:") == 0) { 
currentEvent = s.substring(6); 
} 
else{ 
if (currentEvent == "exit") { 
removeMember(s); 
} 
else{ 
if (s[0] != "{") { 
s = s.substring(s.indexOf("{")); 
if (s.Length == 0)continue; 
} 
var d = JSON.parse(s); 
if (currentEvent == "enter") 
addMember(d); 
else if (currentEvent == "message") 
addMessage(d); 
//else unknown event 


} 


cc 
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注意 ， 这 段 代码 有 些 复杂 ， 那 是 因为 没有 对 所 有 的 事件 使 用 JSON 对 象 引起 的 。 这 也 是 我 
建议 用 JSON 格式 处 理 所 有 数据 的 原因 。 那 会 使 处 理 向 后 兼容 方案 变 得 更 容易 。 
上 面 讲 的 是 第 一 种 方式 。 另 一 种 方式 是 给 JSON 对 象 添 加 一 个 event 字段 (这 仍然 需要 修 


改 “exit” 事 件 ， 以 便 使 用 JSON 对 象 )。 这 和 在 SSE 客户 端 使 用 id: 行 的 方式 相似 ， 但 也 
在 JSON 对 象 中 重复 了 “id” 信 息 (参见 5.5 节 )。 















































但 如 果 要 这 么 做 ,何必 要 麻烦 用 事件 行 呢 ?不 如 将 所 有 收 到 的 消息 放 到 processOneLine(s) 
中 ， 代 码 有 点 像 下 面 这 样 : 














switch(d){ 
case "enter":addMember(d);break; 
Case "exit":removeMember(d.id);break; 
case "message":addMessage(d);break; 


} 


所 以 ， 概 括 来 说 ，SSE 的 event: 特性 是 一 种 组 织 不 同行 为 的 方式 ， 但 与 添加 一 个 额外 的 
JSON 或 CVS 字段 相 比 ， 它 并 没有 优势 ， 还 不 及 后 者 在 处 理 不 兼容 SSE 的 浏览 器 时 那么 容 
易 和 高 效 。 所 以 我 建议 仅 当 满足 以 下 两 个 条 件 时 才 使 用 event:: 


。 所 有 的 客户 端 都 原生 支持 SSE; 
。 想 要 在 事件 类 型 上 使 用 不 同 的 数据 类 型 ， 包 括 整 型 、 浮 点 型 或 字符 串 等 简单 的 数据 类 型 
(因此 不 可 能 包含 自己 的 事件 字段 ) 。 


HA 一 外 
8.3 多 行 数 据 
本 书 一 直 提 倡 对 消息 使 用 JSON 对 象 格式 ， 其 中 一 个 原因 是 这 使 我 们 可 以 严格 地 一 行 一 条 
消息 。 为 什么 这 样 做 有 好 处 ”因为 这 使 得 在 旧版 浏览 器 使 用 的 向 后 兼容 方案 中 进行 数据 解 
析 变 得 非常 容易 。 


你 是 否 注意 到 ， 在 外 汇 交易 应 用 中 ， 后 端 如 何在 SSE 模式 下 在 数据 后 面 只 添加 一 个 额外 
的 回 车 ?在 长 轮 询 、XHR 或 者 iframe 方案 中 忽略 了 这 个 回 车 ， 因 为 用 不 上 : 一 行 JSON 
总 是 一 条 完整 的 消息 (这 还 顺带 节省 了 1 字 节 ， 或 者 实际 是 6 字 节 ， 因 为 向 后 兼容 方案 也 
没有 在 数据 行 加 data: 前 缀 ， 节 省 6 字 节 并 不 是 这 样 做 的 原因 。 节 省 客户 端 处 理 才 是 原因 
所 在 )。 


那么 为 什么 SSE 需要 在 消息 之 间 有 一 个 空 行 呢 ? 这 是 因为 SSE 标准 允许 一 条 消息 分 央 
多 行 。 比 如 ， 服 务 端 可 以 这 样 发 一 条 消息 : 












































成 





二 


data:Roses are red 
data:Violets are blue 
data:No need to escape 
data:When you do as I do 
<-- Extra LF 




















出 于 理解 客户 端 如 何 处 理 的 目的 ， 我 们 假设 服务 器 每 发 送 一 行 都 会 冲刷 数据 ， 然 后 休眠 
1 秒 或 2 秒 。 客 户 端 会 收 到 “Roses are red”。 没 有 收 到 空 行 ， 所 以 客户 端 对 它 进行 缓冲 ， 
然后 等 待 。2 秒 之 后 又 收 到 了 一 行 ,，“Violets are blue”， 绥 冲 的 数据 就 是 :“Roses are red\ 
nViolets are blue”。 注 意 这 只 是 缓冲 ， 不 是 告诉 客户 端 有 数据 到 达 。 在 缓冲 了 第 4 行 之 后 ， 


完整 缓冲 是 “Roses are red\nViolets are blue\nNo need to escapenWhen you do as 1do”。 最 


后 ， 客 户 端 接收 到 一 个 空 行 ， 然 后 调用 JavaScript 事件 处 理 程序 ， 并 传递 在 缓冲 中 建立 的 
这 一 行 长 字符 串 。 

















传递 给 事件 处 理 程序 的 字符 串 没 有 最 后 的 换行 。 





(SSE 标准 解释 说 ， 在 最 后 一 行 数 据 后 面 加 一 个 换行 会 引起 客户 端的 问题 ， 只 
能 删 掉 最 后 一 个 换行 。 标 准 就 是 这 样 做 事 ， 并 且 常 常 发 现 自己 在 自 娱 自 乐 ， 
没有 人 可 以 倾 述 ， 除 了 墙角 的 盆栽 。) 









































如 果 确 实 想 要 在 消息 的 最 后 加 一 个 空 行 ， 该 怎么 办 呢 ?” 发 送 一 个 空 的 data: 行 。 
比如 ， 下 面 这 个 数据 顺序 会 给 事件 处 理 程序 传递 “111\n\n333\n\n” 字 符 串 : 








data:111 
data: 
data:333 
data: 
data: 


为 什么 SSE 允许 这 样 做 呢 ? 这 样 的 话 就 不 需要 对 回 车 进行 转 又 了。 相反， 使 用 JSON 的 
话 ， 上 面 那 段 数据 就 会 变 成 : 

















data: "Roses are red\nViolets are blue\nNo need to escape\nWhen you do as I do" 


不 像 本 节 之 前 的 数据 缓冲 的 例子 ， 占用 了 2 字 节 ， 第 一 个 是 \， 然 后 是 一 个 n。 将 data: 
和 随后 的 空 行 计算 在 内 ， 上 面 的 JSON 字符 串 一 共 是 80 字 节 ， 而 非 JSON 格式 的 91 字 节 。 
那些 data: 字符 串 总 计 所 占 的 字 节 数 ， 比 那些 额外 的 \ 和 两 个 引号 所 占 的 字 节 数 要 多 。 








如 何在 向 后 兼容 方案 中 实现 处 理 多 行 数据 的 单条 消息 ? 基本 上 需要 用 
JavaScript 实现 本 节 前 面 介绍 过 的 SSE 缓冲 算法 。 并 且 服 务 器 需要 为 所 有 的 客 
户 端 发 送 那个 额外 的 空 行 ， 不 仅 是 为 支持 SSE 的 客户 端 。 这 没有 那么 难 ， 并 
且 不 需要 用 data: 前 级 ， 所 以 字 节 数 的 区 别 不 会 有 什么 问题 。 但 是 ， 和 总 是 
使 用 一 行 JSON 的 便利 性 相 比 ， 我 觉得 你 需要 有 一 个 非常 好 的 理由 这 样 做 。 


总 地 来 说 ， 使 用 SSE 的 多 行 特性 ， 需 要 同时 满足 下 列 条 件 。 


。 所 有 的 客户 端 都 支持 原生 SSE。 
。 发 送 的 数据 原本 就 是 多 行 的 。 
。 有 一 个 更 好 的 理由 不 使 用 JSON。 
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wx i 
8.4 消 息 中 的 全 百 
这 一 节 很 短 。 本 书 一 直 使 用 data:XXX、event:XXX 等 ，SSE 标准 也 允许 写成 data: XXX、 
event: XXX。 换 句 话说， 可 以 在 冒号 后 面 有 空格 。 我 是 个 随和 的 人 ， 乐 于 让 人 们 选择 他 们 
自己 的 处 理 方式 ， 但 这 里 我 要 表 个 态 : 绝 不 要 这 样 做 。 因 为 这 样 只 会 浪费 字 节 ， 并 且 完 全 
没有 任何 益处 。 


但 这 个 特性 导致 了 一 个 潜在 问题 : 如 果 把 一 个 未 经 处 理 的 字符 串 作 为 数据 ， 如 果 数 据 中 需 
要 以 一 段 空格 开始 ， 这 个 空格 会 被 删除 。 怎 么 办 ? 简单 的 方案 是 使 用 JSON。 天 哪 ， 我 确 
实在 反复 述说 这 个 ， 不 是 么 ? 这 个 方案 有 个 小 小 的 整 端 : 每 个 字符 串 需 要 额外 的 2 字 节 
(用 于 引号 ) ， 如 果 字 符 串 中 有 任何 特殊 字符 ， 还 需要 额外 的 转 义 斜 杠 字符 。 但 这 仍然 是 个 
次 端 ， 有 其 他 的 解决 方案 吗 ” 是 的 ， 如 果 需 要 发 送 一 个 未 经 处 理 的 字符 串 ， 并 且 碰 巧 这 个 
字符 串 以 一 个 重要 的 空格 开始 ， 那 就 在 所 有 的 字符 串 前 面 加 一 个 空格 。 这 会 在 每 一 行 浪 费 
1 字 节 ， 如 果 这 种 浪费 仍然 让 你 烦恼 ， 那 就 只 在 数据 以 空格 开始 时 才 这 样 做 …… 但 是 为 了 
1 字 节 这 样 做 又 显得 太 小 题 大 做 了 。 


“让 = 全 
8.5 又 见 请 求 头 
在 外 汇 交 易 应 用 中 ， 我 在 URL 中 传人 了 xhr=1 或 longpoll=1， 这 样 服务 器 就 可 以 识别 是 


哪 种 向 后 兼容 方案 。 如 果 两 者 都 没 指定 ， 就 默认 为 SSE 方案 。 还 有 一 种 方式 。 在 介绍 它 之 
前 ， 先 回顾 一 下 如 何 使 用 这 些 方案 : 

































































longpoll 





发 送 一 个 内 容 类 型 为 text/plain 的 请 求 头 ， 在 发 送 完 一 条 消息 后 退出 。 
xhr 

发 送 一 个 内 容 类 型 为 text/plaiin 的 请 求 头 。 
sse 

发 送 一 个 内 容 类 型 为 text/event-strean 的 请 求 头 。 


发 送 一 个 data: 前 缀 和 一 个 额外 的 回 车 ， 以 及 id: 行 。 





替代 方案 是 SSE 客户 端 发 送 一 个 Accept: text/event-streanm 请 求 头 ， 它 应 该 唯一 指定 客 
户 端 原生 支持 SSE。 所 以 外 汇 交 易 应 用 原来 的 代码 如 下 所 示 : 




















$GLOBALS["is_longpoll"] =i array_key_exists("longpoll", $_POST) 
|| array_key_exists("longpoll", $_GET); 

$GLOBALS["is_xhr"] = array_key_exists("xhr", $_POST) 
|| array_key_exists("xhr", $_GET); 
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SGLOBALS[ "is_sse"] = !(SGLOBALS["is_LongpoLL"] || $GLOBALS["is_xhr"]); 


if ($GLOBALS["is_sse"]) header("Content-Type: text/event-stream"); 
else header("Content-Type: text/plain"); 














在 使 用 了 前 文 所 说 的 那 种 请 求 头 之 后 ， 不 再 需要 发 送 xhr=1， 但 仍然 需要 发 送 longpoll=1， 
这 样 它 和 XHR/iframe 的 区 别 就 能 识别 出 来 。 修 改 后 的 代码 如 下 所 示 : 











SGLOBALS[ "is_sse"] = @$_SERVER["HTTP_ACCEPT"] == "text/event-stream"; 
SGLOBALS[ "is_LongpoLL"] = array_key_exists("longpoll", $_POST) 

|| array_key_exists("longpoll", $_GET); 
$GLOBALS["is xhr"] = !($GLOBALS["is longpoll"] || $GLOBALS["is sse"]); 


if ($GLOBALS["is_sse"]) header("Content-Type: text/event-stream"); 
else header("Content-Type: text/plain"); 





你 可 能 已 经 发 现 了 我 没有 这 样 做 的 原因 : 相同 的 复杂 度 ， 却 没有 任何 优势 。 使 用 显 式 的 
xhr 或 者 LongpoLL 有 两 个 小 优势 。 首 先 它 可 以 出 现在 服务 端 日 志 中 ， 而 HITP 请 求 尖 通常 

\ 会 ， 这 可 能 有 助 于 故障 排查 。 甚 次， 请求 头 方案 会 有 一 些 风险 ， 比 如 浏览 器 出 bug 而 遗 
漏 发 送 请 求 头 ， 或 者 遗漏 了 连接 符 等 。 而 发 送 URL 参数 完全 是 无 风险 的 。 


8.6 ”这 就 是 全 部 内 容 吗 
本 章 介 绍 了 SSE 的 event: 特性 ， 以 及 它 如 何 支持 发 送 多 行 数据 的 消息 ， 以 及 数据 前 面 的 


空白 会 引起 问题 。 我 们 没有 在 外 汇 交 易 应 用 中 使 用 这 些 特性 ， 因 为 使 用 了 JSON 之 后 没有 
必要 用 这 些 特性 了 。 



































这 就 是 全 部 内 容 吗 ? 不 ， 这 仍然 不 是 SSE 标准 的 全 部 内 容 。 还 有 跨 域 问题 要 介绍 ， 这 个 主 
题 会 连同 认证 授权 一 起 在 下 一 章 介绍 。 
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认证 授权 : 谁 在 敲 门 





前 面 儿 童 中 的 数据 推送 应 用 是 对 所 有 人 开放 的 ， 本 章 会 介绍 如 何 限制 访问 ， 不 论 是 通过 
IJP、Cookie 还 是 密码 。 好 消息 是 这 就 像 保 护 服务 器 上 的 其 他 资源 一 样 直截了当 。 


但 这 并 不 是 本 章 的 唯一 主题 。 在 之 前 几 章 的 示例 中 有 另 一 个 潜在 的 限制 ， 现 在 也 到 了 处 理 
它 的 时 候 了 。 这 个 限制 就 是 HTML 文件 (用 以 发 起 SSE 请 求 和 接收 数据 ) 和 服务 端 脚本 
(用 以 发 送 数 据 ) 必须 部 署 在 同一 个 服务 器 ， 好 吧 ， 确 切 地 说 ， 必 须 是 同一 个 域 。 本 章 后 
面 会 介绍 域 的 定义 以 及 如 何 应 对 这 种 限制 。 

这 两 个 主题 联系 紧密 ， 但 请 注意 它们 是 正 交 的 : 可 能 因为 客户 端 缺少 认证 授权 (IP、 
Cookie、 密 码 ) 或 来 自 一 个 不 允许 的 域 ， 或 兼备 这 两 种 原因 ， 导 致 数据 推送 失败 。 要 使 数 
据 推 送 成 功 ， 客 户 端 必须 两 者 都 满足 。 


如 果 你 熟悉 网 络 应 用 ， 想 要 了 解 本 章 的 内 容 概要 ， 那 么 就 是 认证 授权 和 器 域 资源 共享 几乎 
就 像 它们 在 Ajax 中 的 表现 一 样 ， 但 请 注意 浏览 器 的 支持 情况 和 bug。 




















本 章 结束 时 ， 会 介绍 如 何 给 前 面 几 章 中 介绍 的 示例 应 用 添加 认证 授权 以 及 跨 域 资源 共享 
支持 。 








9.1 Cookie 


Cookie 可 以 发 送 给 一 个 SSE 脚本 ， 在 Cookie 方面 ， 浏 览 器 会 像 对 待 其 他 任何 HTTP 请 求 
一 样 对 待 SSE 连接 ， 不 需要 额外 做 什么 。 下 面 是 一 段 简单 的 前 端 测 试 代码 : 
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<htmL> 

<head> 

<title>Cookie logging test</title> 
<script> 

document .cookie="ssetest=123; path=/"; 
document .cookie="another-one=123; path=/"; 
</script> 

</head> 

<body> 

<script> 

var es = new EventSource('log_headers.php'); 
</script> 

</body> 

</html> 


当然 ， 这 些 Cookie 应 该 来 自 网 站 的 另外 一 个 页 面 ， 而 不 是 在 JavaScript 中 创建 。 这 个 例子 
复 用 了 8.1 市 中 的 日 志 脚 本 。 


这 个 例子 也 适用 于 所 有 的 向 后 兼容 方案 : XMLHttpRequests 和 iframe 请 求 会 被 当成 其 他 任 
何 HTTP 请 求 处 理 ! 





TT 





而 男 一 个 方 和 同上 会 怎样 呢 ，SSE 服务 端 脚本 能 否 将 Cookie 返回 呢 ? 答案 是 肯定 的 ， 我 们 可 
以 测试 一 下 这 对 脚本 。 前 端 没 什么 可 说 的 ， 和 在 第 2 章 中 见 过 的 basic_sse.html 无 异 : 





<!doctype htmL> 


<htmL> 
<head> 
<meta charset="UTF-8"> 
<title>SSE: access count Using cookies</title> 
</head> 
<body> 
<pre id="x">Initializing...</pre> 
<script> 
var es = new EventSource("sse_sending_cookies.php"); 
es.addEventListener("message", function (e) { 
document .getELementById("x" ) .innerHTML += "\n" + e.data; 
}, false); 
</script> 
</body> 
</html> 


个 文件 就 是 本 书 源码 的 sse_sending_cookies.html， 它 连接 到 sse_sending_cookies.php， 这 
a 后 端 代码 看 上 去 与 basic_sse.php 相似 ， 但 在 文件 靠近 最 上 面 
的 部 分 ， 会 查找 名 为 "accessCount" 的 Cookie (如 果 没 有 找到 ，@ 会 抑制 这 个 错误 ， 并 且 
(int) 转换 会 将 其 变 为 0) ， 将 其 增加 后 返回 这 个 新 值 ， 这 个 新 值 也 显示 在 输出 中 : 





























<?php 
header("Content-Type: text/event-stream"); 


$accessCount = (int)@$ COOKIE["accessCount"] + 1; 
header("Set-Cookie: accessCount=" . $accessCount); 
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while (true) { 


echo "data:" . $accessCount.":".date("Y-m-d H:i:s")."\n\n"; 
@ob_flush();@flush(); 
sleep(1); 


运行 脚本 可 以 首先 看 到 如 下 输出 : 


Initializing... 

1:2014-02-28 14:17:33 
1:2014-02-28 14:17:34 
1:2014-02-28 14:17:35 


如 果 刷 新 页 面 ， 输 出 就 是 这 样 了 : 
Initializing... 
2:2014-02-28 14:17:40 


2:2014-02-28 14:17:41 
2:2014-02-28 14:17:42 


好 玩 吧 | 


9.2 ”认证 授权 “使 用 Apache 服 务 器 ) 


可 以 像 处 理 其 他 URL 一 样 对 SSE 脚本 进行 IP 限制 或 密码 保护 。 在 本 书 源码 的 .htaccess 文 
件 中 ， 有 如 下 一 段 代码 : 




















<Files "log_ headers ip_restrict.php"> 
order deny,allow 
deny from all 
allow from 127.0.0.1 

</Files> 














这 是 说 只 允许 来 自 localhost (127.0.0.1) 的 浏览 器 访问 ， 其 他 任何 IP 的 访问 都 会 返回 一 个 
403 错误 。 可 以 用 log_headers.ip_restrict.html 测试 一 下 ， 它 只 是 在 尝试 连接 ， 并 没有 做 别 
的 (顺便 说 一 下 ，log_headers_ip_restrict.php 是 log_headers.php 的 副本 ， 是 在 第 8 章 创 建 
的 ， 这 里 创建 副本 的 唯一 原因 是 将 这 些 IP 地 址 限制 应 用 到 该 文件 上 )。 














如 果 从 127.0.0.1 访问 ， 就 会 在 tmp.log 上 留 下 记录 ; 如 果 从 其 他 下 访问 ， 则 不 会 在 tmp. 
log 上 留 下 记录 (Apache 甚至 都 不 会 启动 PHP 脚本 )。 浏 览 器 报告 这 种 拒绝 访问 的 方式 有 
所 不 同 ， 在 Firefox 的 JavaScript 控制 台 会 看 到 类 似 “NetworkError: 403 Forbidden - http:// 
example.com/log_headers_ip_restrict.php.” 的 消息 。 在 Chrome 中 ， 会 在 开发 者 工具 的 “网 
络 ” 栏 中 看 到 一 个 被 取消 的 请 求 。 


说 句 题 外 话 ， 下 面 是 一 段 允 许 所 有 私有 IPv4 和 IPv6 网 络 的 可 选 代码 块 ， 在 许多 情况 下 这 
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种 做 法 是 更 实用 的 : 


<Files "log_headers ip_restrict.php"> 
order deny,allow 
deny from all 
allow from 127.0.0.1 
allow from 172.16.0.0/12 
allow from 10.0.0.0/8 
allow from 192.168.0.0/16 
allow from fc00::/7 
</Files> 


以 上 是 通过 “你 是 什么 ”来 限制 访问 ,诸如 一 个 IP 地 址 。 那 么 通过 “你 知道 什么 ”来 限制 
访问 会 怎样 呢 ， 比 如 通过 用 户 名 和 密码 ?在 .htaccess 中 也 有 这 样 的 代码 块 : 


AuthUserFile /etc/apache2/sse_book_htpasswd 

AuthType Basic 

AuthName SSEBook 

<Files "log_headers_basic auth.php"> 
require valid-user 

</Files> 











事实 上 在 .htaccess 文件 中 会 发 现 像 下 面 这 样 的 代码 : 














<Files ~ "^(Log_headers_basic_auth[.]phplauth[.]basic_by_apache[.]php)S"> 
因为 它 也 会 用 在 后 面 小 节 介 绍 的 脚本 中 。~ 表示 这 是 一 段 正则 表达 式 , 但 这 里 
这 个 正则 表达 式 仅仅 是 用 竖 线 隔 开 的 一 个 二 选 一 的 列表 。 通 过 将 文件 名 中 的 . 
转化 成 字符 类 型 ( 方 括号 ) 进行 精确 匹配 (而 不 是 正则 表达 式 中 . 的 含义 ) 。 























然后 在 /etc/apache2/sse_book_htpasswd 文件 中 包含 下 面 这 些 内 容 





oreilly:AhsbB/t5vHsxA 


文 是 一 个 用 于 测试 的 基本 认证 密码 ， 对 应 的 用 户 名 为 “oreilly”。 











使 用 htpasswd 程序 修改 密码 。 密 码 文件 可 以 放 在 磁盘 的 任何 位 置 ， 不 是 必须 
要 在 Apache 的 配置 目录 下 ， 只 要 修改 AuthUser File 来 匹配 即 可 。 














现在 通过 浏览 器 访问 log_headers.basic_auth.html， 执 行 顺序 如 下 。 





(1) 加 载 log_headers.basic_auth.html， 因 为 它 是 未 受 保护 的 。 

(2) 运行 JavaScript， 创 建 EventSource 对 象 。 

(3) 浏览 器 连接 到 log_headers_basic_auth.php， 由 Apache 告知 需要 用 户 名 和 密码 。 
(4) 浏览 器 弹出 一 个 对 话 框 要 求 用 户 输入 用 户 名 和 密码 。 








(5) 浏览 器 再 次 连接 ， 这 次 发 送 了 用 户 名 和 密码 。 

(6) Apache 进行 验证 并 运行 PHP 脚本 。 

(7) PHP 脚本 开始 向 浏览 器 输出 数据 (然而 在 这 个 例子 中 , 它 只 将 请 求 头 信 息 记录 到 日 志 中 ， 
并 没有 输出 任何 数据 )。 


注意 ， 如 何 认证 授权 完全 是 由 Apache 处 理 的 ，PHP 脚本 不 需要 做 任何 事情 ， 并 且 在 认证 
完成 之 前 不 会 开始 执行 。 




















如 果 想 要 PHP 脚本 复查 Apache 是 否 正确 配置 并 且 要 求 认 证 授权 ， 可 以 检查 REMOTE_USER 
是 否 设置 。log_head ers_basic_auth.php 最 上 面 有 这 人 一行: 














if(!@$_SERVER[ "REMOTE_USER"])exit; 


这 就 像 一 个 冷酷 的 硬汉 保镖 在 把 守 ， 没 有 密码 ?休想 进来 。 





PHP 中 ， 可 以 通过 $_SERVER["REMOTE_USER"] 或 $_SERVER["PHP_AUTH_USER"] 
来 获取 连接 者 的 用 户 名 。$_SERVER["PHP_AUTH_PW"] 是 密码 (明文 )。 但 如 果 
PHP 在 安全 模式 下 运行 ， 则 不 能 获取 到 PHP_AUTH_* 的 值 。 





9.3 寓 有 SSE 的 HTTP POST 


如 果 你 买 这 本 书 只 是 为 了 学 习 如 何 POST 变量 到 SSE 后 端 ， 而 且 你 已 经 直接 跳 到 这 一 市 ， 
我 建议 你 先 来 个 深呼吸 ， 并 确保 你 现在 正在 坐 着 。 你 看 ， 我 有 一 些 坏 消 息 ， 在 想 怎么 委婉 
地 跟 你 说 …… 还 记得 小 时 候 你 想像 孙悟空 一 样 72 变 ， 大 家 都 说 你 没 法 做 到 ， 而 你 也 从 来 
都 没有 实现 ， 这 就 证 明 他 们 是 对 的 吗 ? 呢 ， 现 在 这 种 事 又 发 生 了 。 




















SSE 标准 不 允许 POST 数据 到 服务 端 。 这 是 个 令 人 烦恼 的 玻 漏 ， 应 该 在 某 个 时 间 点 纠正 。 
毕竟 ，XMLHttpRequest 对 象 允许 发 送 POST 数据 (讽刺 的 是 ， 这 意味 着 在 第 6 章 和 第 7 章 
介绍 的 向 后 兼容 方案 中 可 以 轻易 地 发 送 POST 数据 )。 


在 介绍 认证 授权 的 本 章 涉及 这 方面 内 容 ， 因 为 它 在 做 用 户 登录 时 会 特别 令 人 烦恼 。 我 们 不 
想 通过 GET 方式 发 送 用 户 名 和 密码 ， 因 为 那样 会 在 URL 中 可 见 ， 并 最 终 记录 在 一 个 服务 
器 日 志文 件 中 ， 等 等 。 























SSE 标准 也 不 允许 指定 HTTP 请 求 头 ， 所 以 用 自 定义 请 求 头 也 不 行 ， 那 又 该 怎么 做 呢 ? 


幸好 ， 有 一 种 发 送 非 URL 数据 给 SSE 进程 的 方法 ， 那 就 是 本 章 开 始 所 介绍 的 : Cookie 
所 以 ， 在 你 的 JavaScript 中 ， 只 需要 调用 new EventSource() 之 前 ， 像 这 样 设 置 一 个 Cookie: 


document .cookie = "login=oreilly,test;path=/"; 
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(我 知道 你 已 经 意识 到 需要 使 它 更 动态 ， 而 不 是 硬 编码 的 用 户 名 和 密码 ) 密码 在 Cookie 中 
是 明文 的 。 强 烈 推 荐 只 在 同时 使 用 SSL 的 时 候 这 样 用 。 














然后 ， 是 在 服务 端 如 何在 PHP 中 处 理 Cookie 数据 : 








<?php 

if (1defined("PASSWORD_DEFAULT")) { // 兼容 5.4.x 以 及 更 早 版 本 
function password_verify($password, $hash){ 
return crypt($password, $hash) === S$hash; 





}//if (1defined("PASSWORD_DEFAULT")) 结束 


$SSE = (@$_SERVER["HTTP_ACCEPT"] == "text/event-stream"); 
if ($SSE) header("Content-Type: text/event-stream"); 
else header("Content-Type: text/plain"); 


if (!array_key_exists("login", $_COOKIE)) { 
echo "data: The login cookie is missing. Exiting.\n\n"; 
exit; 


list($user, $pw) = explode(",", $_COOKIE["login"]); 


$fromDB = '$2a$10$4LLeBta770Y0Z7795j.8' . 
"He/ZCQonnvImXIXoegaLzE1MuNLEa6PQa ' ; 


if (!password verify($pw, $fromDB)) { 
echo "data: The login cookie is bad. Exiting.\n\n"; 
exit; 


} 


while (true) { 
echo "data:" . date("Y-m-d H:i:s") . "\n\n"; 
@ob_flush();@flush(); 
sleep(1); 


(这 是 auth.custom.php 的 全 部 代码 ， 下 一 节 将 会 用 到 这 个 文件 。) 


上 面 的 代码 首先 设置 了 SSE 请 求 头 ， 这 样 登录 错误 消息 能 像 其 他 数据 一 样 发 送 。 然 后 用 
explode() 将 CVS 字符 串 (这 里 的 Cookie) 转化 成 数组 ， 用 List($user ，$pw) 将 数组 转化 
为 两 个 变量 。 这 里 的 $fromDB 是 一 个 硬 编码 的 字符 串 ， 但 是 ， 就 像 变 量 名 的 字面 意思 所 示 ， 
它 一 般 应 该 是 一 个 用 以 获取 散 列 密码 的 SQL 查询 。 然 后 密码 被 散 列 化 并 且 使 用 password_ 
verify() 验证 ， 如 果 与 数据 库 中 查询 到 的 不 匹配 ， 访 问 就 会 被 拒绝 。 





























前 文 代码 中 硬 编码 的 密码 是 通过 password_hash() 生成 的 ， 它 和 password_ 
verify() 都 是 在 PHP 5.5 中 新 增 来 支持 密码 安全 的 函数 ， 它 们 在 早期 的 PHP 
. 版 本 中 很 容易 实现 ， 相 关 代 码 可 以 在 附录 C 的 C.5 节 中 找到 (因此 前 文 的 代 
码 片段 可 以 用 在 早期 版 本 的 PHP 中 ， 已 经 内 联 定义 了 password_verify())。 
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顺便 说 一 下 ， 网 站 的 任何 页 面 都 会 接收 到 登录 Cookie， 因 为 路 径 指 定 为 / 了。 但 是 我 们 可 
能 不 希望 这 样 ， 一旦 发 生 了 这 种 情况 ， 你 就 需要 在 产品 系统 中 让 SSE 服务 端 URL 看 起 来 
像 一 个 路 径 比如， 使 用 Apache 的 mod_rewrite) 然后 将 其 设置 成 Cookie 的 路 径 。 

















还 有 ， 这 里 设置 document 的 Cookie， 意 味 着 它 关 联 着 加 载 HTML 文件 所 在 的 域名 。 在 本 
章 后 面 要 介绍 的 跨 域 问题 中 ， 这 意味 着 如 果 要 链接 一 个 不 同 的 后 端 ， 就 不 能 向 该 后 端 发 送 
Cookie 了 。 所 以 这 个 “Cookie 代替 POST” 方 案 只 有 当 HTML 文件 和 SSE 后 端 在 同一 个 
服务 器 上 时 才 有 效 。 


9.4 ”多 重 鉴 权 选择 


接 下 来 的 示例 文件 auth_test.html 给 用 户 提供 了 3 种 登录 网 站 的 方式 。 第 一 种 是 通过 HTML 
表单 赋值 (为 方便 测试 我 已 经 填写 好 了 ， 但 是 请 不 要 在 产品 中 这 样 做 )。 这 种 方式 是 把 
这 些 值 放 在 Cookie 中 并 提交 到 前 面 介 绍 过 的 auth.custom.php 脚本 。 另 外 两 个 按钮 会 使 
用 HITP 基本 认证 。 第 一 个 使 用 Apache 认证 ， 第 二 个 使 用 PHP 认证 。 上 文 已 经 介绍 过 
Apache 认证 是 如 何 工作 的 ， 即 通过 .htaccess 文件 来 控制 。 


























直接 在 PHP 中 完成 基本 认证 的 方式 有 点 像 前 面 小 市 介绍 过 的 Cookie 例子 ， 但 是 不 同 的 是 
我 们 将 要 从 PHP_AUTH_USER 和 PHP_AUTH_PW 中 获取 登录 细节 。 下 面 是 从 auth.basic_by_php. 
php 文件 中 提取 的 处 理 认 证 的 代码 片段 : 








$user = @$_SERVER["PHP_AUTH_USER"]; 
Spw = @$_SERVER[ "PHP_AUTH_PW"]; 


$fromDB = '$2a$10$4LLeBta770Y0Z7795j.8' . 
"He/ZCQonnvImXIXoegaLzE1MuNLEa6PQa ' ; 

if (!password_verify($pw, $fromDB)) { 
header('WWW-Authenticate: Basic realm="SSE Book"'); 
header("HTTP/1.0 401 Unauthorized"); 
echo "Please authenticate.\n"; 
exit; 


} 
当 认 证 失败 时 ， 那 些 HTTP 请 求 头 会 返回 给 浏览 器 ， 并 且 会 使 浏览 器 弹出 一 个 登录 对 话 框 。 








下 面 是 完整 的 auth_test.html 代码 。 这 是 一 项 有 趣 的 研究 ， 因 为 它 也 介绍 了 如 何在 需要 时 创 
建 一 个 延 时 的 EventSource 连接 。 相 比较 而 言 ， 实 际 上 之 前 的 例子 里 都 在 第 一 次 加 载 时 自 
动 建立 了 连接 。 





<!doctype htmL> 
<htmL> 
<head> 
<title>SSE: Basic/Custom Auth Test</title> 
<meta charset="UTF-8"> 
<script> 
var es = null; 
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function formSubmit(form) { 
document.cookie = "login=" 
+ form.username.value 


+ "," + form.password.value 
+ "; path=/"; 
startSSE("auth.custom.php"); 


} 


function authByApache() { 
startSSE("auth.basic_by_apache.php"); 
} 

function authByPHP() { 
startSSE("auth.basic_ by_php.php"); 

} 


function startSSE(url) { 
document .getELementById("x" ) .innerHTML = ""; 
if (es) { 
document.getElementById("x").innerHTML 
+= "Closing connection.\n"; 
es.close(); 
} 
document .getELementById("x" ) .LinnerHTML 
+= "Connecting to " + url + "\n"; 
es = new EventSource(url); 
es.addEventListener("message", function (e) { 
document.getElementById("x").innerHTML += "\n" + e.data; 
}, false); 
} 
</script> 
</head> 
<body> 
<div style="float:right"> 
<form action="" onSubmit="formSubmit(this);return false"> 
Username: <input type="text" name="username" id="Username" value="oreilly"/> 
<br/> 
Password: <input type="password" name="password" value="test"/> 
<br/> 
<input type="submit" value="Submit these credentials to auth.custom.php"/> 
</form> 
<br/> 
<button onClick="authByApache()">Use auth.basic_ by_apache.php</button> 
<br/> 
<button onClick="authByPHP()">Use auth.basic_by_php.php</button> 
</div> 
<pre id="x">Waiting...</pre> 
</body> 
</html> 


9.5 SSL 和 CORS (连接 到 其 他 服务 器 ) 


首先 是 一 个 好 消息 ，HTTP 和 HTTPS 服务 器 都 可 以 使 用 SSE (以 及 本 书 介绍 的 所 有 向 后 兼 
容 方案 )。 当 HTML 文件 从 一 个 HTTP 服务 器 下 载 时 ， 它 要 连接 一 个 HTTP 服务 器 获取 数 


据 ， 





当 从 一 个 HTTPS 服务 器 下 载 时 ， 它 要 从 一 个 HTTPS 服务 器 "上 获取 数据 。 








注 1: 





写本 书 的 时 候 ， 在 Chrome 中 ，EventSource 和 任何 向 后 兼容 方案 都 不 支持 自 签名 SSL。 








五 
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如 果 试 图 将 从 一 个 HTTP 服务 器 下 载 的 页 面 连接 到 HITPS 服务 器 ， 或 者 反 过 来 将 从 一 
个 HITPS 服务 器 下 载 的 页 面 连接 到 HITP 服务 器 的 话 ，Firefox 中 会 出 现 “The connection 
to ... was interrupted while the page was loading.” 错 误 。Chrome 报错 消息 勉强 好 一 点 : 
“Uncaught Error: SecurityError: DOM Exception 18.”。 其 他 浏览 器 也 都 会 报 一 些 同样 星 泡 的 
消息 。 事 实 上 ， 它 们 都 在 报关 于 CORS 失败 的 错误 。 继 续 往 下 读 。 



































如 果 你 打算 用 Chrome 或 者 Safari 来 测试 接 下 来 几 节 的 代码 ， 确 保 浏 览 器 版 
本 至 少 为 Chromium 26 或 者 Safari 7， 因 为 在 之 前 的 版 本 中 对 于 CORS 支持 
是 有 缺失 或 bug 的 。 而 Firefox 在 很 早 的 版 本 就 已 经 能 够 很 好 地 支持 了 。 参 
见 9.9 节 。 








CORS 代表 Cross-Origin Resource Sharing 〈 跨 域 资 源 共 享 )。 我 在 想 他 们 是 不 是 先 找 了 一 个 
朗朗 上 口 的 缩写 然后 来 找 合适 的 单词 。 不 论 如 何 ，CORS 是 同 域 策 略 的 解决 方案 。 同 域 策 
略 是 一 个 安全 特性 : 如 果 从 一 个 服务 器 下 载 一 个 HTML 文件 ， 浏 览 器 只 允许 连接 回 那 个 完 
全 相同 的 服务 器 (这 并 不 是 专门 针对 SSE 的 ， 它 也 会 影响 Ajax 连接 和 网 络 字体 请 求 ) 。 
































这 有 些 遗 憾 ， 对 吧 ? 如 果 AcmeFeeds 想 要 在 weather.example.com 域 下 卖 一 个 天 气 数据 服 
务 ， 并 且 和 希望 客户 们 可 以 在 他 们 各 自 的 网 站 上 放 一 些 可 以 连接 到 到 weather.example.com 的 
JavaScript 组 件 ， 情 况 会 如 何 ?” 同 域 策略 不 允许 这 样 。 























这 里 有 另外 一 个 观点 。 如 果 AcmeWeather 在 weather.example.com 域 下 有 一 个 天 气 数据 服 
务 ， 同 时 它 运作 一 个 网 站 ， 也 在 weather.example.com 域 下 ， 通 过 广告 来 支付 维护 数据 服务 
的 费用 ， 这 样 如 何 ? 不 过 AcmeWeather 不 想 让 其 他 一 些 皇 部 的 网 站 偷 取 它 的 数据 服务 ， 因 
为 那 会 使 它 没 有 广告 收入 。 

浏览 器 的 默认 状态 是 保护 AcmeWeather， 六 览 器 不 允许 一 些 人 使 用 其 他 网 站 的 数据 。 因 此 
CORS 的 发 明 是 用 来 允许 AcmeFeeds 和 覆盖 那个 默认 设 定 ， 并 告诉 全 世界 它 愿意 别人 来 拿 它 
的 数据 。 

基本 上 ，CORS 是 一 种 让 服务 器 放宽 同 域 策 略 的 方式 。 如 果 你 已 经 通过 XMLHttpRequest 对 
象 ( 比 如 ， 通 过 Ajax) 使 用 过 CORS， 相 信 下 面 这 句 话 会 让 你 开心 : EventSource 对 象 基 
本 上 以 同样 的 方式 工作 。 


所 以 ， 一 个 域 到 底 是 什么 ”如果 满足 以 下 条 件 则 认为 两 份 资源 在 同一 个 域 。 











。 它们 的 域名 匹配 (比如 ，example.com 和 somethingelse.com 是 不 同 的 ，www1l.example. 
com 和 www2.example.com 是 不 同 的 , 10.1.2.3 和 example.com 是 不 同 的 , 即便 “example. 
com” 是 解析 到 10.1.2.3 的 )。 

。 它们 的 协议 匹配 (比如 ， 都 是 http:/ 或 者 都 是 https://)。 
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。 它们 的 端口 号 匹配 (比如 ，http://example.com:80 和 http://example.com:8080 是 不 同 域 ， 
但 是 http://example.com 和 http://example.com:80 是 同一 个 域 )。 


更 严格 的 定义 ， 请 参见 http://tools.ietf.org/html/rfc6454#section-4。 关 于 CORS 全 部 细节 ， 
参见 http://www.w3.org/TR/cors/。 


下 一 市 将 介绍 CORS 是 由 SSE 服务 端 脚本 实现 的 ， 而 SSE 服务 器 端的 脚本 通过 返回 额外 
请 求 头 来 表明 它 允 许 哪些 资源 共享 。 


9.6 Allow-Origin 

把 下 面 这 一 行 添加 到 服务 端 脚本 的 起 始 行 ， 来 测试 一 下 : 
header("Access-ControL-ALLow-Origin: *"); 

这 一 行 是 说 :“ 任 何人 从 任何 地 方 访问 都 允许 接收 这 个 服务 端 脚本 的 数据 "。 这 一 段 已 经 汪 

加 到 fx_server.cors.php 文件 ， 不 过 这 个 文件 也 只 是 第 7 章 末 尾 介 绍 的 示例 外 汇 交易 应 用 的 


服务 端 脚本 的 一 个 副本 罢了 。 下 面 的 附注 介绍 了 如 何 测 试 这 个 请 求 头 ， 看 看 它 如 何 正 在 产 
生 我 们 所 期 望 效 果 的 。 

















测试 CORS 

与 之 前 的 例子 相 比 ， 这 个 测试 需要 一 些 额 外 的 安装 工作 。 需 要 在 一 个 域 下 运行 
HTML， 然 后 使 它 连接 到 另 一 个 域 下 的 SSE 服务 器 ， 即 不 同 的 域名 、 不 同 的 端口 或 
者 不 同 的 协议 。 不 过 这 并 不 需要 两 台 机 器 ， 只 需要 配置 一 下 服务 器 。 如 果 不 知道 怎么 
做 ， 可 以 从 网 上 搜 到 很 多 与 你 所 使 用 操作 系统 和 服务 器 软件 相关 的 配置 教程 。 

为 了 测试 CORS， 这 里 创建 了 fx_client.cors.html] 文件 ， 它 连接 到 fx_server.cors.php 文 
件 。 但 是 ，fx_client.cors.html 是 本 书 源码 中 为 数 不 多 的 需要 在 特定 条 件 下 才能 运行 的 
文件 ， 它 取决 于 你 所 使 用 的 服务 器 设置 。 你 不 会 看 到 下 面 这 一 行 代码 : 


var url = "fx_server.cors.php?"; 
取而代之 的 是 : 


var UrL = window.Location.href.repLace( 
"fx_client.cors.html","fx_server.cors.php?"); 


这 是 设置 了 一 个 URL 绝对 地 址 ， 而 不 是 相对 地 址 。 所 以 如 果 fx_client.cors.html 的 访 
问 URL 是 http:/www.example.comy/oreilly/sse/listings/fx_client.cors.html， 那 么 url 就 被 








设置 成 http:/ www.example.com/oreilly/sse/listings/fx_server.cors.php?。 








接 下 来 看 : 


if(url.indexof("https") >= 0) 
url = url.replace("https://","http://"); 
else url = url.replace("http://","https://"); 


这 段 代码 用 来 在 HTTP 和 HTTPS 之 间 转 换 。 为 了 支持 这 段 代码 的 功能 实现 ， 这 里 设置 
Apache SSL 为 一 个 自 签 名 证 书 ， 但 是 在 同一 个 IP 地 址 并 指向 同一 个 DocumentRoot。 
所 以 当 浏 览 http://www.example.com/oreilly/sse/listings/fx_client.cors.html 时 ， 它 连接 到 
https://www.example.com/oreilly/sse/listings/fx_server.cors.php?， 而 当 浏 览 https://www. 
example.com/oreilly/sse/listings/fx_client.cors.html 时 ， 它 连 接 到 http://www.example. 
com/oreilly/sse/listings/fx_server.cors.php?。 


接 下 来 是 在 主机 名 部 分 不 同 的 测试 域名 方法 : 


url = url.replace("//www1.","//www."); 


当 浏 览 Wwwl.example.com 时 ， 它 会 连接 到 www.example.com， 当 浏览 www.example. 
com， 或 其 他 非 www1l 的 地 址 时 ， 它 什么 都 不 做 ， 同 时 也 会 继续 连接 到 这 个 与 第 一 次 
连接 时 相同 的 域 。 


这 里 通过 复制 虚拟 主机 www.example.com 配置 (包括 HTTP 和 HTTPS) 和 将 其 改名 
为 examplel.com 的 方式 来 配置 Apache 以 便 能 够 处 理 上 面 所 有 的 情况 。 因 此 ， 当 浏览 
http://www1.example.com/oreilly/sse/listings/fx_client.cors.html， 它 连接 到 https://www. 
example.com/oreilly/sse/listings/fx_server.cors.php?。 


测试 的 时 候 ， 新 增 一 个 卫 地 址 总 是 比 新 增 一 个 主机 名 称 要 容易 ， 下 面 是 一 种 转化 卫 
地 址 为 URL 的 方法 : 


url = UrL.repLace( 


/L/L/INdt[E. J\dt[. J\d+)[.151[/]/, 
"$1.50/"); 


万 恶 的 正则 表达 式 啊 ! 我 们 简单 来 说 ， 这 里 是 把 IP 地 址 最 后 一 段 的 “51” 变 成 了 
“50”， 所 以 如 果 浏 览 http://10.0.0.51/oreilly/sse/listings/fx_client.cors.html， 就 会 连接 到 
https:// 10.0.0.50/oreilly/sse/listings/fx_server.cors.php?。 


最 后 ， 添 加 一 段 代 码 来 报告 所 发 生 的 变化 ; 当然 这 只 是 为 了 排查 故障 : 


console.log("Our URL is 
+ Window.Location.href 
+ "; Connecting to " + url); 


现在 ， 来 验证 一 下 这 些 修改 是 否 真 的 有 效 。 首 先 用 两 个 不 同 的 域名 ， 分 别 以 http:// 和 
https:// 来 浏览 fx_server.cors.html。 这 应 该 是 有 效 的 ， 然 后 编辑 fx_server.cors.php 来 向 
header("Access-Control-Allow-0rigin: *"); 添加 注释 ; 这 时 候 所 有 的 变量 应 该 都 失效 了 。 











认证 授权 : 谁 在 敲 门 | 133 





9.7 完善 访问 控制 


header("Access-ControL-ALLow-Origin: *"); 中 的 * 使 它 向 任何 人 ( 张 三 、 李 四 、 王 五 ， 
等 等 ) 开放 。 幸 好 ， 完 善 访问 控制 是 完全 可 行 的 。 比 如 ， 像 这 样 修改 ，header("Access- 
Control-Allow-Origin: http://www.example.com"); (http:/ 前 缀 必须 要 有 )。 现 在 ， 浏 
览 http://www.example.com/oreilly/sse/listings/fx_client.cors.html， 它 连 接 到 https://www. 
example.com/oreilly/sse/listings/fx_server.cors.php?， 上 成 功 了 。 但 是 ， 就 如 本 章 开始 所 介绍 的 
那样 ， 下 面 任何 一 个 访问 都 会 失败 : 














。 https:/www.example.com/.../fx_client.cors.html 
。 http://wwwl.example.com/.../fx_client.cors.html 
。 http://www.example.com:88/.../fx_client.cors.html 


。 http://some.other.domain.com/.../fx_client.cors.html 


Access-Control-Allow-Origin 并 不 能 代替 合理 的 认证 ， 因 为 客户 端 可 以 伪造 
Origin 请 求 头 。 同 时 还 要 记得 它 还 依赖 于 浏览 器 是 否 正确 地 实现 了 CORS。 








CORS 没有 想象 得 那么 灵活 。 可 以 用 “*” 表 示 完 全 开放 ， 或 者 明确 地 指定 一 个 域 ， 比 如 ， 
一 个 HITP/HTTPS、 域 名 、 端 口号 的 组 合 。 两 种 选择 : 一 个 域 或 所 有 域 ， 任 何 这 两 者 之 
间 的 情况 ， 需 要 在 脚本 中 解析 Origin 请 求 头 。 下 面 是 一 个 最 基本 的 例子 ， 实 际 上 与 使 用 


"Access-Control-Allow-0rigin: *" 完全 相同 : 





header("Access-Control-Allow-Origin: ".@$_SERVER[ ‘HTTP_ORIGIN']); 


(@ 符号 意思 是 抑制 错误 ， 所 以 如 果 没 有 设置 HTTP_ORIGIN， 它 会 静默 地 返回 一 个 空 字符 
况 意味 着 CORS 会 总 是 拒绝 连接 。) 


下 面 是 一 个 更 有 趣 的 例子 : 


一 
这 
导 
地 

















if(preg_match( ‘|https?://www[1-6]\.example\.com$|',@$_SERVER["HTTP_ORIGIN"])) 
header("Access-Control-Allow-Origin: ".$_SERVER["HTTP_ORIGIN"]); 
else header("Access-Control-Allow-Origin: http://www.example.com"); 


最 后 一 行 是 说 ， 如 果 正 则 表达 式 没 有 匹配 成 功 ， 就 需要 从 http://www.example.com 浏览 。 
9.12.3 节 的 附注 栏 “比较 两 个 URL” 中 会 介绍 正则 表达 式 ， 但 这 里 相对 简单 : 它 是 说 任何 
wwwN.example.com 都 可 以 匹配 (N 是 1、2、3、4、5 或 6)， 然 后 会 显示 可 以 连接 。 这 里 
也 显 式 地 允许 HTTP 和 HTTPS 两 种 类 型 的 URL (“s” 后 面 的 问号 意思 是 “s” 是 可 选 的 )。 




















注 2: 我 是 说 完全 相同 吗 ? 当 使 用 证 书 时 有 一 个 关键 的 不 同 ， 请 参见 9.10 市 “构造 函数 与 证 书 ”。 
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注意 https:/www.example.com 会 匹配 失败 ， 因 为 它 不 是 wwwl 到 www6 之 间 的 任何 一 个 ， 
在 [1-6] 后 面 加 一 个 ? 也 可 以 使 它 是 可 选 的 。 





没 觉得 我 们 可 以 做 得 比 这 更 好 一 点 么 ?我们 的 目的 是 只 有 从 www.example.com、www1. 
example.com 等 域 下 载 应 用 HTML 的 客户 端 允 许 连 接 ， 其 他 的 都 不 行 ， 那 要 是 把 这 个 目的 
写 得 更 显 式 一 点 呢 : 
if(preg_match('|https?://www[1-6]?\.example\.com$|',@$_SERVER["HTTP_ORIGIN"])) 
header("Access-Control-Allow-Origin: ".$_SERVER["HTTP_ORIGIN"]); 
elsef{ 
header("HTTP/1.1 403 Forbidden"); 
exit; 
} 
这 里 调整 了 一 下 正则 表达 式 以 是 它 可 以 有 覆盖 到 www.example.com (以 及 这 个 子 域 的 HTTP 
和 HTTPS 地 址 )， 但 任何 其 他 的 域 试 图 连接 ， 都 会 立即 死 掉 。 这 段 代码 会 放 到 服务 端 脚 本 
的 最 上 面 。 




















9.8 HEAD 和 和 OPTIONS 


到 目前 为 止 ， 我 们 只 考虑 了 浏览 器 发 送 GET 或 POST 请 求 的 可 能 性 。 当 请 求 一 个 新 数据 
流 时 发 送 一 些 其 他 的 请 求 ( 比 如 PUT) 会 显得 很 奇怪 。 在 PHP 中 ， 至 少 所 有 的 请 求 方式 
都 是 同等 对 待 的 。 如 果 客 户 端 发 送 一 个 HEAD 请 求 ， 现 在 的 代码 会 表现 得 很 粳米， 我 们 没 
有 事先 假设 发 送 任 何 请 求 体 ， 而 事实 上 这 里 不 仅仅 是 发 送 内 容 ， 并 且 会 一 直 保 持 连 接 。 解 
决 这 个 问题 的 一 种 选择 是 刚好 在 进入 主 循 环 之 前 (比如 在 所 有 的 请 求 发 送 之 后 ) 就 返回 
HEAD 请 求 。 而 另 一 种 方式 是 将 HEAD 请 求 定性 为 不 合理 的 ， 并 拒绝 接收 请 求 。 如 果 想 要 
实现 这 个 方法 ， 就 可 以 将 下 面 的 代码 放 到 脚本 的 顶部 : 















































switch ($_SERVER["REQUEST_METHOD"]) { 
case "GET":case "POST":break; 
case "OPTIONS":break; //TODO 
default: 
header("HTTP/1.0 405 Method Not Allowed"); 
header("Allow: GET,POST,OPTIONS"); 
exit; 


} 


这 个 HITP 方法 检测 实际 上 与 本 章 认 证 授权 和 CORS 的 主题 无 关 。 现 在 开始 
讨论 是 为 介绍 0PTIONS 的 处 理 方法 〈 马 上 开始 ) 做 铺垫 。 

















如 果 你 有 这 个 需求 ， 那 么 对 于 前 面 几 章 那些 只 对 GET 请 求 有 效 的 例子 ， 只 
需 将 下 面 这 段 代码 放 到 脚本 的 顶部 即 可 : 
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if($_SERVER[ 'REQUEST_METHOD']!='GET' ) a 
{header("HTTP/1.0 405 Method Not ALLowed'" ) ;header("ALLow: GET");exit;} 


当 返 回 405 时 ，Allow 请 求 头 是 必须 的 ， 它 指明 了 什么 请 求 头 是 允许 的 ， 如 果 它 指定 为 
OPTIONS 会 怎样 ? 


文 个 方案 是 浏览 器 可 以 用 一 个 OPTIONS 方法 调用 脚本 ， 来 获取 支持 的 HTTP 协议 组 件 信息 。 
在 CORS 的 话题 范围 内 ， 称 为 预 检 请 求 ， 通 常用 来 询问 什么 信息 可 以 发 送 给 上 述 的 域 。 














如 果 用 Apache 认证 ， 注 意 0PTIONS 请 求 会 以 返回 401 (“要 求 认证 ”) 的 形式 
失败 ， 并 且 永 远 不 会 实际 访问 到 脚本 。 浏 览 器 一 般 会 提示 用 户 进行 认证 ， 但 
也 有 些 浏览 器 (比如 ，Safari 5.1) 不 会 。 




















让 人 头疼 的 是 ， rn A 人 通配符 似乎 并 不 能 起 作 
用 ， 所 以 不 得 不 浪费 带宽 来 试图 猜测 浏览 器 可 能 发 送 的 每 一 种 请 求 头 。 下 面 是 一 种 实现 的 
方法 : 

















case "OPTIONS": 
header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Headers: Last-Event-ID,". 
" Origin, X-Requested-With, Content-Type, Accept," 
" Authorization"); 
exit; 














如 果 用 Node.js 做 同样 的 事 ， We 可 是 ， 用 Node.js 处 理 POST 有 一 
杂 ， 所 以 用 了 两 个 专用 的 国 数 (这 里 没有 介绍 ) 分 别处 理 GET 和 POST， 而 请 求 处 理 函 数 
完全 被 下 面 这 个 切换 函数 取代 : 























function (request, response) { 
switch (request.method) { 
case "GET": 
handleGET(request, response); 
break; 
case "POST": 
handlepPOST(request, response); 
break; 
case "OPTIONS": 
response.writeHead(200, { 
"Access-Control-Allow-Origin: *", 
"Access-Control-Allow-Headers: Last-Event-ID," + 
" Origin, X-Requested-With, Content-Type, Accept," + 
" Authorization" 
上 
break; 
default: 
response.writeHead(405, { 
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"ALLow: GET,POST,OPTIONS" 
}); 


break; 


9.9 Chrome 和 Safari 以 及 CORS 


基于 Webkit 的 浏览 器 已 经 有 一 些 妨 碍 CORS 在 原生 SSE 中 正常 运行 的 bug。 在 Chrome 
25 以 及 更 早 版 本 和 Safari 6 以 及 更 早 版 本 中 ，EventSource 的 CORS 实现 是 被 破坏 /缺失 
的 。 在 我 融 下 这 些 文字 时 ， 许 多 人 已 经 不 再 使 用 Chrome 25 了 ， 但 相当 一 部 分 人 还 在 使 用 
Safari 6。 如 果 这 算是 个 坏 消息 ， 那 么 更 坏 的 消息 是 这 个 几乎 不 可 能 用 特性 检测 。 

如 果 CORS 是 你 系统 必要 的 部 分 ， 那 么 替代 方案 就 是 强制 Chrome 和 Safari 使 用 XHR 来 


取代 SSE。 这 听 起 来 很 可 怕 ， 不 是 么 ? 不 过 ， 这 其 实 并 没有 那么 糟 ， 因 为 在 带宽 和 连接 方 
面 ，XHR 做 的 几乎 和 SSE 一 样 好 。 事 实 上 XHR 与 SSE 相 比 只 有 两 个 缺点 。 

















。 需要 额外 的 代码 使 之 同时 支持 SSE 和 XHR， 但 这 个 我 们 已 经 做 了 。 
。 当 内 存 占用 太 多 时 需要 重 连 ， 参见 7.5 市 。 


本 章 末 尾 的 示例 中 ， 使 用 了 浏览 器 版 本 检测 通知 旧版 的 Chrome 和 Safari 用 XHR 取代 原生 
SSE。 因 为 它 只 是 做 了 一 些 正则 匹配 ， 所 以 本 书 没 有 介绍 ， 有 兴趣 的 话 ， 可 以 看 一 下 本 书 
源码 fx_client.auth.html 中 的 function oldSafariChromeDetect()。 











Chrome 有 男 一 个 问题 ,虽然 只 是 在 开发 和 测试 时 才 有 : 自 签名 的 SSL 证书 会 被 拒绝 。 
XHR 和 SSE 都 有 这 个 问题 ， 用 命令 行 标记 --disable-web-security 也 不 起 作用 。 所 以 ， 
这 不 是 Chrome 的 SSE 实现 所 特有 的 问题 。 事 实 上 ， 这 个 bug 甚至 不 是 CORS 特有 的 : 不 
能 用 XMLHttpRequest 或 EventSource 连接 到 一 个 自 签名 HTTPS 服务 器 ， 就 是 这 样 ?3。 你 可 
以 通过 将 服务 器 证 书 添 加 为 本 地 信任 根 证 书 的 方式 解决 这 个 问题 ， 或 是 等 训 览 器 开发 者 解 
决 。 或 者 ， 因 为 自 签名 证 书 一 般 只 在 测试 和 开发 时 使 用 ， 可 以 用 Firefox 和 其 他 浏览 器 开 
发 ， 然 后 只 在 产品 服务 器 上 用 Chrome 测试 。 





























iOS 7 可 以 在 原生 SSE 上 运行 CORS， 但 是 ， 当 连接 到 一 个 请 求 认 证 的 SSE 数据 源 时 ， 这 
时 却 无 法 弹出 提示 密码 的 对 话 框 。XHR 也 有 同样 的 问题 ， 所 以 没 法 解决 。 如 果 想 要 支持 
iPhone/iPad， 则 需要 安排 用 户 直 接 访问 目标 服务 器 的 页 面 ， 以 便 他 们 可 以 获得 提示 输入 用 
户 名 密码 的 弹 框 。 浏 览 器 会 等 竺 那些 证 书 ， 而 这 些 证 书 会 在 SSE 或 Ajax 建立 连接 时 发 出 
(Cookie 认证 方式 没有 这 个 问题 )。 





























注 3: 可 以 在 http://code.google.com/p/chromium/issues/detail?id=96007 关注 一 下 这 个 bug 报告 。 
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9.10 构造 函数 与 证 书 
现在 你 肯定 知道 EventSource 构造 函数 利用 URL 参数 进行 连接 了 。 它 还 有 第 二 个 参数 ， 这 


是 一 个 带 有 选项 的 对 象 。 目 前 为 止 ， 只 有 一 个 可 能 的 选项 ，withCredentiaLs， 它 是 布尔 类 
型 ， 默 认 值 为 false。 


试 一 下 把 前 面 示例 中 的 这 个 值 都 设 为 true， 把 下 面 这 一 行 ; 
es = new Event9Source(u); 

修改 为 : 
es = new EventSource(u，{ withCredentials: true } ); 


如 果 连 接 到 的 是 同一 个 服务 器 ， 这 不 会 有 什么 影响 。 但 是 在 CORS 示例 中 做 这 个 修改 ， 尝 
试 连接 到 一 个 不 同 的 协议 、 主 机 或 端口 。 它 就 会 中 断 。 在 Firefox 浏览 器 上 会 报 出 “连接 
中 断 ” 异 常 。 

为 了 解决 这 个 问题 ， 可 以 让 服务 端 脚 本 发 送 下 面 两 个 请 求 头 ， 而 不 是 header("Access- 
Control-Allow-Origin: *");. 


header("Access-Control-Allow-Origin: ".@$_SERVER["HTTP_ORIGIN"]); 
header("Access-Control-Allow-Credentials: true"); 





上 面 第 二 个 请 求 头 是 说 :“ 是 的 ， 我 们 很 乐意 由 你 来 发 送 证 书 ”。 但 这 些 证 书 不 允许 和 
"Access-Control-Allow-Origin: *" 一 起 使 用 。 浏 览 器 会 觉得 这 有 点 大 混杂 。 所 以 ， 还 记得 
前 面 提 到 过 的 那 名 和 "Access-ControL-ALLow-0rigin: *" 等 效 的 代码 吗 ? 放 到 这 里 就 完美 
了 。 它 事实 上 做 着 同样 的 事 ， 但 浏览 器 会 运行 。" 啊 噢 ， 服 务 器 显然 已 经 听从 了 安全 沟通 
的 演讲 ， 所 以 当 它 说 它 想 允许 证 书 时 ， 我 们 也 相信 它 吧 。” 


站 起 来 跳 一 段 欢快 的 舞蹈 吧 ， 因 为 有 了 那 两 行 代码 ， 客 户 端 就 能 添加 withCredentials:true 
配置 了 ， 并 且 一 切 又 重新 奏效 了 。 但 是 我 们 刚刚 允许 发 生 的 事情 到 底 是 什么 ?! 





9.11 withCredentials 


假设 从 http://example.com/index.html 下 载 HTML 文件 ， 它 试图 向 http://www1.example.com/ 
sse.php 建立 SSE 连接 。 如 果 到 本 章 目 前 为 止 这 样 做 过 ， 那 么 你 一 定 知道 这 会 因为 同 域 策 
略 而 失败 。 并 且 你 知道 通过 使 服务 端 设 置 "Access-ControL-ALLow-Origin:" 为 *， 或 是 你 客 
户 端的 域 ， 都 可 以 覆盖 同 域 策略 ， 同 时 连接 也 可 以 正常 工作 。 


























你 也 知道 ， 如 果 已 经 这 么 做 ，HTTP 认证 也 可 以 在 SSE 下 正常 运行 。 


in 





不 过 如 有 果 试 图 将 这 两 件 事 合并 ， 问 题 就 产生 了 。 默 认 情 况 下 ， 当 访问 另 一 个 域 时 ， 不 会 发 











送 认 证 所 需 的 请 求 头 。 如 果 SSE 服务 端 脚 本 (或 者 Apache) 返回 一 个 401 (一 般 这 会 使 浏 
览 器 弹出 对 话 框 要 求 用 户 输入 用 户 名 和 密码 )， 它 会 被 当成 错误 处 理 。 





前 面 介绍 过 用 Cookie 实现 的 自 定 义 登 录 系 统 ， 在 EventSource.withCredentials 
不 支持 POST 的 场合 ， 也 表明 可 以 发 送 Cookie， 但 在 这 里 没 用 ， 因 为 我 们 只 能 
在 文档 上 设置 Cookie， 这 意味 着 我 们 是 在 我 们 的 域 上 设置 ， 而 在 一 个 中 地址 或 
主机 名 上 注册 的 Cookie 不 能 发 送 到 另 一 个 不 同 的 卫 地 址 或 主机 名 上 。 


























那 又 是 什么 意思 ? 意思 是 不 能 在 自 定义 登录 系统 中 使 用 原生 SSE 来 连接 一 个 
不 同 的 域 。 简 单 地 说 就 是 不 可 能 “。 




















那 解决 方案 呢 ? 希望 SSE 标准 将 来 的 版 本 可 以 允许 POST 数据 。 特 殊 处 理 
呢 ? 在 本 章 末尾 的 例子 中 ， 当 检测 出 是 在 试图 做 一 个 跨 域 的 自 定 义 认 证 ， 会 
强制 使 用 XHR 连接 替代 SSE。 其 他 方法 会 有 使 用 基本 的 认证 ， 避 免 使 用 不 同 
的 域 ， 或 者 使 用 越界 认证 ， 因 此 发 送 给 SsE 服务 端的 Cookie 就 能 在 打开 SSE 
连接 之 前 被 接收 到 。 






































因此 ， 要 做 到 这 些 ， 客 户 端 需要 将 { withCredentials: true } 作为 第 二 个 参数 传递 给 
EventSource 构造 国 数 ， 如 上 节 所 介绍 的 那样 ， 服 务 端 需要 返回 "Access-ControL-ALLow- 
Credentials" 请 求 头 ， 设 置 为 true， 同 时 设置 "Access-Control-Allow-0rigin" 为 客户 端 指 
定 的 任意 域 。 一 旦 做 了 这 些 ，HTTP 认证 (以 及 Cookie ) 就 能 运作 于 CORS 了 。 








好 吧 ， 它 们 可 以 在 现代 浏览 器 上 运行 。XHR 以 完全 一 样 的 方式 运作 ， 所 以 它们 也 能 运行 于 
向 后 兼容 方案 。 好 吧 ， 呢 …… 看 下 一 节 吧 。 














再 次 提醒 ， 这 些 都 不 是 真正 的 安全 。 它 全 依赖 于 客户 端 遵循 规则 。 用 几 行 你 
所 选 的 后 端 语 言 代 码 ， 或 者 一 个 curl 单行 小 程序 ， 就 可 以 发 送 认 证 请 求 头 、 
Cookie、GET 数据 、POST 数据 ， 其 至 一 张 伊丽莎白 二 世 的 照片 给 任何 SSE 
服务 器 ， 不 论 它 们 是 否 返 回 Access-Control- 请 求 头 。 不 仅 如 此 ， 你 还 可 以 
伪造 User-Agent 和 0rigin 请 求 头 。 

















CORS， 以 及 withCredentials， 主 要 用 以 防止 跨 站 请 求 伪 造 (CSRF) 和 类 似 
攻击 。 





注 4: 好 吧 ， 不 完全 是 。 在 Firefox， 只 是 你 可 以 从 http://example.com 发 送 Cookie 到 https://example.com， 
反之 亦 然 ( 即 只 在 协议 部 分 不 同 的 域 )。 我 的 建议 是 不 要 依赖 这 个 特性 ， 因 为 这 不 符合 XHR 的 
CORS/Cookie 特性 ， 所 以 可 能 将 来 会 修改 。 

注 5: 指 允 许 跨 域 发 送 的 ， 其 他 的 仍然 试用 这 条 规则 ， 比 如 ，wwwl.example.com 的 Cookie 不 能 发 送 到 


www2.example.com。 
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9.12 CORS 和 向 后 兼容 方案 


本 





改 。 


忆 通 篇 都 在 介绍 能 在 旧版 浏览 器 上 运行 的 SSE 等 效 方案 ， 我 已 经 尝试 达到 了 99% 的 浏 
览 器 覆盖 率 。 好 消息 是 CORS 在 XHR" 中 是 可 用 的 并 且 完 全 以 相同 的 方式 运作 。 因 为 它们 
使 用 XMLHttpRequest， 因 此 不 需要 为 第 6 章 和 第 7 章 介 绍 的 长 轮 询 或 XHR 技术 做 任何 修 





但 是 IE9 及 





























其 更 早 版 本 有 一 些 问题 。 


但 是 在 看 下 8/1E9 之 前 ， 先 给 支持 XHR 的 浏览 器 添加 CORS 支持 。 是 的 ， 那 已 经 做 完了 ， 


又 快 又 简单 的 原因 是 CORS 随 着 服务 端 请 求 头 一 起 完全 做 完了 ， 而 JavaScript API 没有 任 
何 修 


改 。 











但 那 是 不 支持 证 书 的 CORS。 比 如 ， 示 例 应 用 发 送 一 个 自 定 义 请 求 头 (Last-Event-1ID)。 
因此 ， 必 须 使 用 withcredentiaLts， 而 不 是 纯粹 的 CORS。 现 在 来 给 支持 XHR 的 浏览 器 添 
加 withCredentials， 这 需要 修改 startXHR() 国 数 ; 








function startXHR() { 


xhr = new XMLHttpRequest(); 


xhr .open("GET", yu, true); 
if (LastId)xhr .setRequestHeader("Last-Event-ID"，LastId); 
xhr.send(null); 


} 


与 SSE EventSource 构造 函数 的 options 对 象 不 同 的 是 ，XHR 设置 第 三 个 参数 为 true。 


接 下 来 ， 在 startLongPoll 函数 中 做 同样 的 修改 : 


function startLongPoll() { 


if (window.XMLHttpRequest)xhr = new XMLHttpRequest(); 


else { 


document .getELementById("msg" ) .LnnerHTML += 


} 


"** Your browser does not support XMLHttpRequest. Sorry.**<br>"; 


if ("withCredentials" in xhr) { 
xhr.open("GET", u, true); 


} else 


{ 


document .getELementById("msg" ) .LnnerHTML += 


"** YOUr browser does not support CORS. Sorry.**<br>"; 


} 
if (lastId)xhr.setRequestHeader("Last-Event-ID", lastId); 
xhr.send(null); 





注 6: Firefox 自从 3.5 就 支持 XHR 的 CORS，Chrome 从 4.0 开始 ，Safari 从 4.0 开始 , 正 从 8.0 或 者 10.0， 
这 取决 于 所 支持 的 程度 ，iOS Safari 和 Andorid 内 置 浏览 器 器 分 别 从 3.2 和 2.1 开始 。 换 名 话说 ， 可 以 认 
为 除了 正之 外 的 所 有 浏览 器 都 支持 XMLHttpRequest 的 CORS。 








这 里 不 仅 open() 的 第 三 个 参数 为 true， 也 删除 了 IE6/TE7 的 Ajax 相关 代码 ， 取 而 代 之 的 
是 一 个 报错 信息 ， 这 才 是 IE6/IE7 要 关心 的 。 接 下 来 检测 是 否 支 持 withCredentials， 如 果 
不 支持 (比如 IE8/IE9)， 就 报 一 个 错误 (这 是 下 一 节 要 关心 的 )。 





(可 以 从 本 书 源码 的 你 _client.cors_xhr.html 文件 找到 上 面 这 段 代 码 。) 


我 本 应 该 在 startXHR() 中 也 做 相同 的 检测 ， 没 有 这 样 做 是 因为 connect() 
的 代码 已 经 确保 IE9 及 其 更 早 版 本 不 会 执行 到 startXHR()。 我 还 没有 发 现 一 
款 以 startXHR() 结尾 但 却 不 支持 的 CORS 和 证 书 的 浏览 器 ， 如 果 你 发 现 了 ， 
还 请 告诉 我 。 

















9.12.1 CORS 和 IE9 及 其 更 早 版 本 

在 之 前 的 章节 我 提 到 过 长 轮 询 和 XHR 技术 很 好 。 第 7 章 介绍 的 iframe 技术 是 另 一 回 事 ， 
它 不 管用 。 由 于 安全 原因 ， 一 个 iframe 不 能 访问 来 自 另 一 个 域 的 iframe 的 内 容 ， 也 没有 类 
似 CORS 的 变通 方案 可 以 用 。 所 以 ， 这 就 意味 着 正 8 和 IE9 必须 使 用 长 轮 询 来 解决 应 用 中 
的 跨 域 问题 。 








如 果 你 说 , “IE6 或 者 IE7 怎么 办 ”? 你 问 得 太 多 了 : 它们 没有 一 套 我 们 可 
以 使 用 的 CORS 机 制 ， 即 便 是 使 用 XHR (比如 长 轮 询 )。 所 以 ， 简 单 地 说 ， 
IE7 及 其 更 早 版 本 不 能 在 跨 域 情况 下 运行 ， 且 必须 将 HTML 和 数据 推送 服务 
放 到 同一 个 域 。 








是 否 需 要 使 用 withcredentials 呢 ? 问题 其 实 是 ， 是 否 需要 向 不 同 的 域 服务 器 发 送 认证 请 
求 头 或 Cookie， 并 且 能 在 IE&IE9 上 运行 ? 对不起， 那个 要 求 太 多 了 。 问 题 是 IE8 和 IE9 
的 CORS 等 效 方案 ， 称 之 为 XDomainRequest， 它 明确 地 拒绝 发 送 任 何 自 定义 请 求 尖 (包括 
认证 请 求 头 ) 和 Cookie。 如 果 必 须 认证 并 且 必 须 支 持 了 E8/IE9， 那 就 必须 将 HTML 页 面 和 
SSE 服务 放 到 同一 个 域 (使 用 一 个 负载 均衡 或 者 反 向 代理 让 所 有 的 服务 器 都 使 用 同一 个 域 
名 ， 然 后 用 其 他 方式 来 标识 它们 之 间 的 不 同 )。 





IE10 及 其 之 后 的 版 本 已 经 使 用 了 XHR 技术 ， 支 持 CORS， 并 且 也 支持 
withCredentials | 不 需 为 IE10 及 其 之 后 版 本 做 任何 修改 。 











XDomainRequest 比 真正 的 CORS 限制 更 多 “。 不 论 是 限制 “只 能 是 GET 或 POST 数据 *”， 还 
是 限制 MIME 类 型 必须 是 text/plain， 都 没什么 影响 。 但 需要 注意 一 个 不 同 点 : 决 不 允许 














注 7: 关于 XDomainRequest 如 何在 IE8 和 IE9 中 运行 ， 参见 http://bit.ly/1csbEHT。 注 意 只 允许 GET 和 POST 
数据 ， 并 且 必 须 是 text/plain， 不 允许 发 送 Cookie。 
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不 同 的 机 制 。 那 意味 着 一 个 来 自 http://example.com 的 HTML 页 面 不 能 访问 https://example. 
com 上 的 服务 ， 反 之 亦 然 。 服 务 器 没 办 法 说 它 很 好 。 





下 面 是 如 何 修改 startLongPoLL() 使 用 xDomainRequest， 从 而 使 下 8 和 IE9 支持 CORS 











if ("withCredentials" in xhr) { 

xhr.open("GET", yu, true); 
} else if (typeof XDomainRequest != "undefined") { 

xhr = new XDomainRequest(); 

xhr .open("GET", uy); 
} else { 

document .getELementById("msg" ) .innerHTML += 

"xx YOUr browser does not support CORS. Sorry.**<br>"; 

} 


xhr.onreadystatechange = longPollOnReadyStateChange; 


如 你 所 见 ，XDomainRequest 是 XMLHttpRequest 的 一 个 简单 的 替代 。 可 是 ， 这 种 特性 检测 
的 方式 意味 着 不 能 在 创建 XMLHttpRequest 对 象 之 前 确定 是 否 需 要 它 。 因 为 xhr 可 能 要 再 
创建 一 次 ， 所 以 在 这 个 代码 块 结束 之 前 不 能 做 任何 事情 。 这 也 是 为 什么 将 给 xhr.onready 
statechange 的 赋值 挪 到 了 那 段 代码 块 之 后 。 


接 下 来 两 节 将 介绍 两 种 处 理 IE9 及 其 更 早 版 本 使 用 startLongPoLL() 的 方法 。 





























9.12.2 1IE8/IE9: 总 是 使 用 长 轮 询 
如 果 已 经 明确 总 是 要 处 理 跨 域 问 题 ， 这 就 好 办 了 ， 在 connect() 函数 中 ， 将 下 面 这 一 段 : 

















else if(isIE90rEarlier){ 
if(window.postMessage)startIframe(); 
else startLongPoll(); 


修改 为 : 


else if(isIE90rEarlier){ 
startLongPoll(); 
} 


作为 奖励 ， 现 在 可 以 移 除 iframe 相关 代码 了 ， 那 意味 着 ， 下 面 这 些 可 以 移 除 。 


。 整个 function startIframe() 函数 。 
。 function disconnect() 中 的 两 行 。 


。 var iframe 和 var iframeTimer。 





9.12.3 ”动态 处 理 IE9 及 其 更 早 版 本 
如 果 不 知 道 是 否 会 命中 安全 限制 怎么 办 ? 这 可 能 因为 是 一 份 会 在 多 个 网 站 使 用 的 库 代 码 。 
也 可 能 它 仅 仅 是 一 个 动态 发 送 到 浏览 器 端的 URL， 并 不 知道 会 连接 到 同一 个 服务 器 还 是 不 
同 服务 器 “。 在 这 种 情况 下 ， 把 前 面 的 代码 修改 成 下 面 这 样 : 




















else if(is ie 9 or_earlier){ 
if(window.postMessage && isSameDomain()) 
start_iframe(); 
else start_longpoll(); 


所 有 额外 的 逻辑 已 隐藏 到 issameDomain() 函数 中 “”。isSameDomain() 函数 需要 做 什么 ? 它 
需要 比较 url 和 window.location.href， 并 且 . 当 下 面 这 儿 条 都 相同 时 返回 true: 


。 协议 (HTTP 和 HTTPS) 

。 服务 器 名 称 (或 者 全 地址 ) 

。 端口 号 

有 两 种 方式 来 写 这 个 功能 代码 。 一 个 是 使 用 正则 表达 式 ， 另 一 种 是 用 一 个 JavaScripttDOM 


的 技巧 。 下 面 的 附注 中 介绍 了 这 两 种 方式 (本 书 源 码 fx_client.cors_xhr_ie.html 中 实现 了 这 
两 种 方式 ， 但 是 使 用 了 正则 表达 式 的 方案 ) 。 








比较 两 个 URL 
任何 时 候 ， 当 需要 比较 两 个 字符 串 的 多 个 部 分 时 ， 正 则 表达 式 都 是 一 个 很 好 的 工具 。 
如 果 因 为 它们 看 起 来 非常 难 读 就 抗拒 学 习 正 则 表达 式 ， 那 就 放弃 这 个 想法 吧 。 在 你 仅 
仅 知道 基本 的 正则 语法 的 时 就 已 经 能 做 很 多 事情 了 。 
此 外 ， 不 论 你 的 正则 表达 式 水 平 如 何 ， 可 以 看 一 下 这 个 测试 工具 : http://www.regexplanet.com/ 
advanced/java script/index.html。 当 你 顺 着 里 边 的 注释 往 下 看 的 时 候 ， 你 会 觉得 它 十 分 
有 帮助 。 
下 面 是 从 一 个 URL 解析 协议 ， 服 务 器 名 称 ， 和 端口 号 的 正则 表达 式 : 


/*Chttps?):[L/IL/ICN/: + /+))2/ 











注 8: 我 觉得 “一 个 动态 发 送 到 浏览 器 端的 URL” 这 名 有 点 夸张 ， 在 这 种 场景 下 ， 它 听 起 来 似乎 多 半 都 会 
连接 到 另 一 个 服务 器 。 如 果 是 这 样 ， 把 代码 简化 成 总 是 使 用 长 轮 询 。 

注 9: 在 本 章 的 最 后 一 个 例子 中 ， 在 决定 是 使 用 SSE 和 Cookie， 还 是 回 退 到 XHR 方案 以 便 可 以 发 送 POST 
数据 时 ， 这 个 函数 会 再 出 现 一 次 。 
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两 头 的 /标示 了 正则 表达 式 的 开始 和 结束 。^ 意 思 是 这 需要 在 字符 囊 开始 的 部 分 匹配 ， 
小 括号 括 起 来 的 部 分 是 想 要 捕获 的 ， 这 里 有 3 块 捕获 ， 如 下 面 粗 体 部 分 : 


/Chttps?):[/]LA([^/A:]+D):CLAA]+)7)2/ 


第 一 段 捕 获 字符 串 是 针对 协议 的 (HTTP 或 HTTPS)， 第 二 部 分 是 域名 ， 第 三 部 分 是 
可 选 的 端口 号 。 小 括号 后 面 的 ?表示 0 或 1 次 ， 所 以 如 果 没 有 端口 号 ， 第 3 个 捕获 字 
符 串 就 会 是 undefined。 第 二 个 块 ，[A/:]+， 是 说 抓 取 任 何 字 符 直 至 遇 到 儿 杠 或 一 个 冒号 
( 斜 杠 或 冒号 不 会 包含 在 捕获 字符 串 中 )。 接 下 来 ，[W]+， 有 是 说 捕获 任何 字符 直至 遇 到 
人 儿 杠 。 这 两 种 情况 中 ， 字 符 串 的 结束 也 会 终止 捕获 〈 还 有 一 对 小 括号 ， 它 是 用 来 分 组 
的 ， 而 不 是 捕获 的 。 它 们 的 目的 是 确保 分 号 前 级 不 是 被 捕获 端口 号 的 一 部 分 )。 

在 协议 和 域名 之 间 是 :/。 为 什么 要 用 这 么 有 趣 的 符号 (:[/][]) ? 针 杠 符号 已 经 用 来 标 
识 正则 表达 式 的 开始 和 结束 ， 所 以 在 其 他 地 方 用 针 杠 时 需要 进行 转 义 。 但 是 ， 它 们 不 
需要 以 字符 类 型 转 义 ， 方 括号 标识 字符 类 型 ， 所 以 [JJ 和 V 是 一 样 的 ， 都 表示 匹配 一 
个 针 杠 。 我 个 人 认为 字符 类 型 方式 更 清晰 (特别 是 当 把 正则 表达 式 放 到 反 斜 杠 需要 转 
义 的 字符 串 中 : 那样 儿 杠 最 终 看 起 来 就 像 这 样 V 或 者 甚至 这 样 \\V) 。 


在 /../ 之 间 定 义 一 个 正则 表达 式 隐 式 地 创建 了 一 个 RegExp 对 象 。 也 可 
以 通过 var re = new RegExp('^(https?)://([^/:]+)(:([^/]+))?'); 来 
显 式 地 创建 一 个 对 象 ， 这 些 方式 都 是 一 样 的 。 注 意 第 二 种 方式 ，”/” 不 
再 用 来 开始 和 结束 正则 表达 式 ， 所 以 不 再 需要 转 义 ! 所 以 我 可 以 直接 用 
“人 ”字符 而 不 用 写成 内。 




















也 可 以 不 把 正则 表达 式 赋值 给 re 变量 ， 而 是 把 开始 的 两 行 合 并 成 一 行 : 
var m1 = /^(https?):[/] [/ICIS/:]+)(:([*/]+))?/ .exec( url )。 











有 两 个 原因 表明 这 不 是 一 个 好 方案 ， 都 是 要 用 这 个 正则 表达 式 两 次 。 第 
一 个 原因 很 明显 ， 重 复 代 码 不 是 件 好 事 。 第 二 个 原因 是 将 正则 表达 式 赋 
值 给 一 个 变量 时 进行 了 编译 。 因 为 我 们 使 用 了 那个 复杂 的 正则 表达 式 两 
次 ， 我 们 为 CPU 节省 了 一 次 额外 的 正则 表达 式 编译 的 开销 ， 这 里 那个 
开销 很 小 ， 不 过 如 有 果 正 则 表达 式 在 一 个 1000 次 的 循环 里 的 话 ， 影 响 就 
会 更 大 。 但 是 ， 原 则 上 来 说 ， 如 果 要 使 用 一 次 以 上 ， 应 该 总 是 把 正则 表 
达 式 赋值 给 一 个 变量 。 说 得 深 入 一 点 ， 如 果 一 个 正则 表达 式 被 调用 多 
次 ， 比 如 服务 器 每 次 发 送 数 据 ， 那 么 应 该 尝试 将 正则 表达 式 赋 值 给 一 个 
全 局 变量 ， 这 样 它 在 整个 脚本 中 只 会 被 编译 一 次 。 






































前 面 聊 那么 多 ， 体 现 到 JavaScript 中 ， 就 是 下 面 这 样 : 


function is SameDomain(){ 














var re 
Var m1 


/Chttps?):[/IL/ICS/: +) :C01+))?/; 


re.exec(url); 
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if (!ml)return true; 

var m2 = re.exec(window.location.href); 
if (m1i[1] != m2[1])return false; 

if (m1[2] != m2[2])return false; 

if (m1i[4] != m2[4]) { 


if (!m1[4])m1[4] = (mi[1] == ‘http’” ) ? "80" : "443"; 
if (1m2[4])m2[4] = (m2[1] == ‘http’” ) ? "80" : "443"; 
if (m1[4] != m2[4])return false; 

} 


return true; 


} 


调用 RegExp 对 象 的 exec 会 返回 一 个 匹配 数组 。[1] 是 第 一 个 匹配 (协议 )，[2] 是 第 
二 个 匹配 (服务 器 名 称 )，[4] 是 端口 号 ([3] 是 包含 了 冒号 的 端口 号 ， 这 里 没有 用 到 )。 
问 口 号 需要 额外 两 行 代码 ， 因 为 如 果 一 个 包含 了 默认 端口 号 而 另 一 个 没有 ， 它 们 也 应 
该 能 匹配 。 那 就 是 ，http://example.com/ 和 http://example.com:80/ 是 一 样 的 (如果 你 发 
现任 何 浏览 器 把 它们 当成 不 一 样 的 ， 就 给 浏览 器 发 送 一 个 Bug 报告 ， 然 后 加 一 点 特殊 


处 理 让 那个 浏览 器 不 执行 那 两 行 代码 ! )。 


如 果 URL 是 相对 的 ， 正 则 表达 式 会 失效 。 换 白话 说 ，URL 不 是 http://exam ple.com/ 
fx_server.php， 而 是 /多 _server.php。 事 实证 明 这 是 一 种 解决 方案 ， 而 不 是 问题 : 根据 
定义 ， 相 对 URL 一 定 是 同 域 的 ! 所以， 如 果 正 则 表达 式 不 匹配 ， 就 会 假定 它 是 一 个 
相对 URL， 并 且 立 即 返回 true， 这 就 是 if(!ml)return true; 这 一 行 所 做 的 事 。 












































我 即便 是 在 处 理 这 种 情况 时 也 不 会 让 正则 表达 式 变 得 更 复杂 ， 




















大 











这 里 假定 url 永远 没有 不 好 的 值 ， 但 那 应 该 在 应 用 的 控制 之 下 。 无 论 如 
何 ， 最 糟糕 的 是 ， 由 于 一 个 坏 的 URL，IE8 会 试图 使 用 iframe 并 且 失 效 
(出 于 安全 原因 ) ， 而 不 是 使 用 长 轮 询 并 且 失 效 (因为 URL 是 坏 的 )。 

正则 表达 式 遇 到 “//example.com/...” 类 型 的 URL 也 会 失效 ， 而 这 些 
URL 要 使 用 相同 的 协议 (允许 在 HTTP 和 HTTPS 站 点 之 间 共 享 代码 )。 


为 使 用 


两 到 三 个 易于 理解 的 正则 表达 式 比 用 一 个 包含 了 所 有 情况 的 怪兽 更 好 。 


你 要 找 的 正则 表达 式 是 八 ([ADCN:] DC 和 4))?/，fx_client.cors_xhr_ 


ie.html 文件 有 它 的 完整 实现 。 


我 说 过 还 有 一 种 做 法 ， 来 直接 看 代码 : 


function isSameDomain() { 
var ml = document.createElement("a"); 
ml.href = url; 
var m2 = document.createElement("a"); 
m2.href = window.location.href; 
if (mi.protocol != m2.protocol)return false; 
if (m1.hostname != m2.hostname)return false; 
if (mi.port != m2.port)return false; 
return true; 
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这 依赖 于 JavaScript 在 DOM 中 创建 一 个 <a> 标签 时 得 到 一 个 完整 的 Location 对 象 ， 
而 这 个 对 象 已 经 把 所 有 这 些 可 爱 的 字段 给 你 准备 好 了 。 了 眼前 看 着 的 不 是 正则 表达 式 ， 
真 酷 。 不 过 它 的 缺点 是 它 有 些 脆弱 ， 不 支持 IE6 或 IE7， 还 有 其 他 一 些 细微 的 浏览 器 
差异 。 你 也 需要 测试 它 如 何在 所 有 的 浏览 器 中 运行 ， 包 括 前 面 代码 中 要 处 理 的 各 种 边 角 
情况 (相对 URL,“//example.com/”URL， 一 个 显示 包含 端口 号 而 另 一 个 没有 ， 等 等 )。 


我 是 在 https://gist.github.com/jlong/2428561 了 解 到 这 种 技术 的 ， 虽然 
很 明显 它 在 那 之 前 就 已 经 被 发 现 了 ,但 是 那个 页 面 中 的 评论 也 很 有 学 习 
价值 。 

















9.13” 下 总 


最 后 两 节 是 否 让 你 大 头 喻 喻 ， 两 眼 汪汪 ， 并 且 开 始 觉得 去 山里 放羊 都 是 一 个 不 错 的 职业 选 
择 ? 了 下 就 是 就 这 个 能 力 。 好 吧 ， 好 消息 是 你 差不多 已 经 读 完 这 本 书 了 ， 还 有 几 页 就 到 附 
录 了 。 但 在 我 们 分 道 扬 镰 之前， 我们 还 需要 做 一 个 例子 : 让 我 们 ( 开 个 玩笑 ) 把 本 章 前 
下 介绍 的 示例 应 用 的 CORS 版 本 并 入 auth.html 示例 。 因 此 ， 数 据 流 会 在 登录 之 后 才 开始 ， 
登录 可 以 通过 基本 认证 或 Cookie 实现 。 让 我 们 ( 开 一 些 严 肃 的 玩笑 ") 使 它 也 支持 所 有 的 
目标 浏览 器 。 好 吧 ， 就 如 已 经 解释 的 那样 ， 那 意味 着 不 能 支持 IE8 和 正 9: 它们 的 CORS 
实现 在 设计 上 与 进行 认证 不 兼容 (页面 可 以 在 正 8 上 运行 ， 但 当 把 目标 URL 设置 为 一 个 
不 同 域 时 就 会 中 断 )。 可 是 ，fx_client.auth.html 确实 检测 了 Chromium 25 及 其 更 早 版 本 ， 
Safari 及 其 更 早 版 本 ， 强 制 它们 使 用 XHR 取代 原生 SSE， 以 支持 CORS。 






























































这 意味 着 这 个 例子 中 只 有 这 些 浏 览 器 使 用 原生 SSE: Firefox 10+、Opera 12+、Chrome 26+、 
Safari 7+。 并 且 ， 当 使 用 “ 自 定义 ”登录 技术 并 涉及 跨 域 时 ， 所 有 的 浏览 器 都 会 回 退 到 使 用 
XHR 技术 (因为 XHR 能 使 用 POST， 而 SSE 只 能 用 Cookie， 而 Cookie 不 能 跨 域 )。 








后 端 文件 
这 个 例子 比 它 实际 所 需 的 要 复杂 ， 因 为 它 支持 本 章 前 面 介绍 的 三 到 四 种 不 同 的 认证 方 
式 ， 不 过 要 把 所 有 的 代码 放 到 两 个 文件 中 。 首 先是 fx_server.auth.incl.php (设置 了 一 些 
全 局 变量 ， 定 义 了 所 有 的 类 和 函数 ) ， 然 后 是 fx_server.auth.inc2.php， 做 了 剩 下 的 全 局 
代码 和 主 循环 。fx_server.auth.incl.php 和 fx_server.auth.inc2.php 的 代码 基本 上 来 自 第 7 
章 末 尾 的 多 _server.xhr.php， 把 它 分 成 了 两 部 分 ， 一 些 代码 移 到 了 专门 的 认证 文件 里 。 








其 他 四 个 文件 (fx_server.auth.apache.php、fx_server.auth.php.php、fx_server.auth.cus 





注 10: 如 果 你 是 漂亮 的 ,女性 ,并 且 实 际 上 并 不 认为 那 听 起 来 有 趣 ,我 们 应 该 在 一 起 …… 不 ,等 等 ,肯定 有 陷阱 ， 
没有 人 会 那么 完美 。 你 可 能 有 一 些 怪异 的 嗜好 ， 包 括 蛤 内 或 Excel 或 某 些 东西 。 
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“... ”就 像 这 样 : 
include_once("fx_server .auth.inci.php"); 


include_once("fx_server .auth.inc2.php"); 


<Files ~ "^fx_server[.]auth[.]inc[12][.]php$"> 
deny from all 
</Files> 





tom.php 和 fx_server.auth.noauth.php) 做 了 它们 各 自 专 门 的 认证 代码 ， 一 个 文件 的 


如 果 用 户 能 直接 连接 到 fx_server.auth.incl.php 或 者 fx_server.auth.inc2.php， 这 可 就 不 
太 好 了 ， 所 以 要 用 这 些 .htaccess 代码 拒绝 这 些 访问 。 是 的 ， 又 是 正则 表达 式 : 











先 来 看 看 后 端 ， 上 面 的 附注 解释 了 为 什么 有 六 个 文件 : incl 和 inc2 包含 了 大 部 分 代码 ( 它 
们 和 第 7 章 末尾 的 代码 类 似 ， 所 以 这 里 不 再 介绍 了 ) ， 然 后 其 他 四 个 文件 和 本 章 前 面 介绍 











的 三 个 auth_test.html 后 端 文件 类 似 ， 第 四 个 文件 的 变化 是 完全 不 做 任何 认证 
件 使 我 们 可 以 看 到 由 于 认证 问题 的 存在 会 有 哪些 部 分 失效 ， 而 且 也 可 以 展现 
址 作为 认证 权衡 时 会 发 生 什么 。 




















。 最 后 这 个 文 


HH 当 使 用 他 地 





fx_server.auth.noauth.php 和 低 _serverauth.apache.php 的 代码 是 一 样 的 (因为 对 fx_server.auth.apache. 
php 来 说 ， 是 由 Apache 来 处 理 认 证 ， 如 果 用 户 是 非法 的 ， 下 面 这 段 脚本 永远 不 会 被 调用 到 ) : 











<?php 
include_once("fx_server .auth.inci.php"); 
sendHeaders(); 
include_once("fx_server .auth.incs.php"); 


(真正 的 fx_server.auth.apache.php 代码 ， 除 了 这 些 之 外 ， 做 了 一 个 快速 的 合理 性 检查 ， 以 


确保 Apache 认证 正确 运转 。) 
下 面 是 fx_server.auth.php.php 脚本 在 PHP 中 处 理 基本 认证 的 版 本 : 


<?php 
include_once("fx_server.auth.inci.php"); 


$user = @$_SERVER["PHP_AUTH_USER"]; 

Spw = @$_SERVER["PHP_AUTH_PW"]; 

$fromDB = '$2a$10$4LLeBta770Y0Z7795j.8' . 
"He/ZCQonnvImXIXoegaLzE1MuNLEa6PQa ' ; 

if (!password_verify($pw, $fromDB)) { 
header('WWW-Authenticate: Basic realm="SSE Book"'); 
header("HTTP/1.0 401 Unauthorized"); 
echo "Please authenticate.\n"; 
exit; 


} 


sendHeaders(); 
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incLude_once("fx_server .auth.inc2.php"); 

















注意 sendHeaders() 是 如 何在 验证 之 后 调用 的 ， 如 果 出 现 问 题 ， 希 望 返回 认证 请 求 头 ， 而 
不 是 SSE 请 求 头 。 











最 后 ， 下 面 是 最 复杂 的 版 本 ， 基 于 Cookie 数据 做 的 自 定 义 认 证 。 除 了 与 前 面 的 例子 不 同 之 
外 ， 它 将 从 Cookie 或 POST 中 接收 认证 数据 : 


<?php 
include_once("fx_server.auth.inci.php"); 
sendHeaders(); 

if (array_key_exists("login", $_COOKIE)) $d 


= $_COOKIE["login"]; 
elseif (array_key_exists("login", $_POST)) $d = 


$_POST[ "Login"]; 


else { 
sendData(array( 
"action" => "auth", 
"msg" => "The login data is missing. Exiting." 
)); 
exit; 
} 
if (strpos($d, ",") === false) { 
sendData(array( 
"action" => "auth", 
"msg" => "The login data is invalid. Exiting." 
)); 
exit; 
} 


list($user, $pw) = explode(",", $d); 
$fromDB = ‘$2a$10$4LLeBta770Y0Z7795j.8”. 
‘He/ZCQonnvImXIXQegalzE1iMuWiEa6PQa” ; 
if (!password_verify($pw, $fromDB)) { 
sendData(array( 
"action"”=> "auth", 
"msg" => "The login is bad. Exiting." 
)); 
exit; 
} 


include_once("fx_server .auth.inc2.php"); 


首先 调用 sendHeaders()， 这 样 可 以 用 sendData() 返回 认证 失败 ， 它 们 会 以 SSE 消息 的 方 
式 返 回 给 浏览 器 。 

















从 浏览 器 中 对 SSE 后 端 进行 故障 诊断 是 令 人 诅 形 的 经 历 。 但 是 ， 在 这 里 不 能 
像 前 面 儿 章 那样 从 命令 行 运行 PHP 脚本 ， 因 为 需要 指定 请 求 头 和 Cookie。 这 
种 快速 测试 最 好 的 选择 是 curl。 下 面 是 测试 这 三 种 认证 方式 的 命令 (这 里 假定 
文件 在 http://example.com 的 sse/ 目录 下 ， 可 以 调整 一 下 适 配 你 的 安装 路 径 )。 














curl -uoreilly:test http://example.com/sse/fx_server .auth.apache.php 


curl -uoreilly:test http://example.com/sse/fx_server .auth.php.php 





curl --cookie "login=oreilly,test" 
http://example.com/sse/fx_server .auth.custom.php 





添加 -v 参数 可 以 看 请 求 头 ， 或 者 --trace 查看 什么 在 传送 的 信息 。 添 加 -H 
"Origin: http://127.0.0.1" 指定 一 个 域 。 


可 以 随意 填写 Cookie 或 用 户 名 : 密码 来 看 一 下 报错 信息 





也 可 以 确保 这 些 连 接 失败 : 





curl http://example.com/sse/fx_server .auth.inci.php 


curl http://example.com/sse/fx_server .auth.inc2.php 





现在 回 到 前 端 ， 页 面 就 像 图 9-1 所 示 。 














Base URL of this page: http://example.com/ssel/listings 
Base URL to connect to: http://example.com/ssel/listings 
Push Method: | Auto-Detect (SSE or fallback) :| 





Use fx_server.auth.apache.php 
Use fx_server.auth.php.php 
Use fx_server.auth.noauth.php 
[ 1 1 ] Pascword:|@@@@ 
Submit these credentials to fx_serverauth.custom.php | 


USD/JPY EUR/USD AUD/GBP 




















9-1: fx_client.auth.html 初始 化 视图 


以 下 是 该 文件 与 之 前 的 公 _client.xhr.html (第 7 章 末 ) 和 公 _clientcors.html (本 章 前 部 分 ) 
的 主要 区 别 。 


。 一 个 可 以 做 以 下 3 项 选择 的 表单 : (1) 采用 什么 连接 技术 (SSE、XHR、iframe、 长 轮 询 )， 
(2) 目标 URL (比如 ， 可 以 修改 域名 、 耳 地 址 或 者 在 HITP 和 HTTPS 之 间 切 换 ) ，(3) 
采用 什么 认证 技术 。 

。 添加 了 一 个 无 认证 技术 的 选项 。 

。 会 基于 user-agent 检测 旧版 的 Chrome 和 Safari 浏览 器 

。 当 使 用 自 定义 的 方式 连接 到 不 同 的 域 ，XHR 会 采用 POST 数据 ， 而 不 是 使 用 Cookie， 
原生 SSE 也 会 切换 到 XHR 兼容 方案 来 使 用 POST。 

。 认证 失败 会 被 截获 并 上 报 。 


把 这 些 汇总 到 一 起 ， 就 产生 了 仅 _client.auth.html 这 个 最 长 的 源 文件 ， 但 是 大 部 分 新 代码 是 表单 
处 理 ， 这 里 不 深入 探讨 。 这 里 也 不 会 探讨 Chrome/Safari 检测 ， 那 只 用 到 了 一 些 正则 表达 式 .。 














这 里 要 介绍 的 第 一 段 代码 非常 简单 。 自 定义 认证 的 代码 (fx_server.auth.custom.php) 需要 
上 报 一 个 错误 时 ， 会 通过 SSE 数据 流 返 回 。 通 过 设置 action 字段 为 "auth" 来 标识 。 所 以 ， 
在 processoneLine() 中 ， 添 加 了 下 面 这 一 段 : 








认证 授权 : 谁 在 敲 门 | 149 





function processOneLine(s){ 


else if(d.action == "auth"){ 
var x = document.getELlementById("msg"); 
x.innerHTML += "Auth Failure:" + d.msg + "<br/>"; 
disconnect(); 


} 
} 
对 disconnect() 的 调用 非常 重要 : 这 里 不 想 让 它 一 直 尝 试 连接 ， 其 至 不 想 一 个 长 连接 机 制 
一 直 尝 试 连接 。 

















现在 有 了 一 个 表单 ， 如 果 用 户 在 已 经 有 连接 在 运行 时 点 击 其 中 一 个 连接 按钮 会 发 生 什么 ? 
有 一 个 叫 reconnect() 的 新 函数 就 用 来 处 理 这 种 情况 : 


this.reconnect = function (newUrl, newOptions) { 
disconnect(); 
url = newUrl; 
for (var key in newOptions) 
options[key] = newOptions[key]; 
connect(); 


} 


所 以 ， 这 里 首先 调用 disconnect() 以 确保 不 仅 当 前 连接 已 关闭 ， 并 且 所 有 的 计时 器 也 停 
止 。 然 后 设置 新 URL， 以 及 任何 新 的 设置 ， 然 后 尝试 带 着 那些 新 设置 连接 到 这 个 新 URL。 























从 SSE 到 XHR 的 回 退 兼容 通过 将 下 面 这 段 加 粗 的 代码 添加 到 startSSE() 函数 来 实现 : 





function startEventSource() { 


if (es) { 
es.close(); 
es = null; 
3 


if (!isSameDomain()) { 
if (options.post || isOldsafariChrome) { 
startXHR(); 
return; 
} 
} 
if (options.post)document.cookie = options.post + "; path=/"; 
var U = url; 
if (LastId)uU += "LastId=" 
+ encodeURIComponent(LastId) + "&"; 
es = new EventSource(y, { withCredentials: true }); 
es.addEventListener("message", function (e) { 
processOnelLine(e.data); 
}, false); 
es.addEventListener("error", handleError, false); 


这 里 的 背景 是 ，options 对 象 有 一 个 可 选 的 post 字段 ， 当 使 用 自 定义 认证 时 放 "Login=username， 





password"。 加 粗 部 分 的 第 一 个 代码 块 是 说 ， 当 连接 到 一 个 不 同 的 域 并 且 想 要 发 送 cookie 
时 它 不 会 工作 ， 所 以 用 XHR 方案 代替 。 第 二 部 分 是 说 ， 如 果 想 要 发 送 cookie 并 且 要 连接 
到 相同 的 域 ， 就 设置 一 个 cookie。 








上 isoldsafarichrome 是 因为 没有 实现 SSE 的 CORS 的 旧 浏 览 器 不 能 跨 域 ， 不 论 是 否 发 送 
cookie， 所 以 应 该 使 用 XHR 方案 。 


第 二 部 分 是 如 何在 startXHR() 中 处 理 POST: 
function startXHR() { 


var ds = null; 
fallback = "xhr=1&t=" + (new Date().getTime()); 
if (options.post) { 
xhr.open("POST", url, true); 
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
ds = fallback + "&" + options.post; 
} 
else { 
xhr.open("GET", url + fallback, true); 


xhr .send(ds); 


fx_client.xhr.html 中 的 代码 有 这 个 非常 不 同 ， 为 它 将 大 部 分 代码 移 到 
一 个 叫 usexMLHttpRequest() 的 辅助 函数 中 ， 这 个 函数 在 startXHR() 和 
startLongPol1() 中 都 会 用 到 。 





所 以 ， 当 没有 设置 options.post， 它 就 和 之 前 的 代码 一 样 : xhr 和 t+ 会 在 URL 中 发 送 。 但 
当 设置 了 en post， 需 要 设置 一 个 额外 的 请 求 头 ， 然 后 将 所 有 要 发 送 的 数据 放 到 ds 
中 ， 它 会 被 传递 给 xhr.send(ds) 。 


























就 是 这 样 了 。 尝 试 一 些 测试 。 比 如 ， 如 果 访 问 ， 将 “Base URL to connect to” 修 改 为 
“https://example.com/sse/listings/”， 或 者 “http://wwwl.example.com/ssel/listings/” 等 。 然 后 
每 个 按钮 都 点 一 下 ， 看 看 是 否 有 数据 传 过 来 ， 在 Firebug (或 者 其 他 任何 你 在 用 的 开发 者 工 

有 具 ) 中 看 一 下 连接 是 否 是 使 用 SSE、XHR 或 者 长 轮 询 ， 是 否 是 用 GET 或 POST， 发 送 的 
cookie 是 什么 。 


9.14 ”未 来 会 有 更 多 一 样 


本 章 又 长 又 复杂 ， 如 果 满 足以 下 两 个 条 件 ， 它 本 可 以 相当 简单 : (1)SSE 标准 ， 以 及 它 的 实 
现 ， 人 允许 像 Ajax 那样 设置 请 求 头 以 及 发 送 POST 数据 ，(2) 不 存在 旧 浏 览 器 。 
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从 过 去 15 年 的 经 验 来 看 ， 旧 浏览 器 和 浏览 器 bug 总 是 如 影 随 形 ， 我 们 要 时 刻 准 备 着 与 它 
们 做 斗争 。 但 是 ， 要 处 理 第 一 点 (SSE 标准 的 限制 )， 由 于 我 们 已 经 为 旧 说 览 器 写 了 向 后 
兼容 方案 ， 我 们 可 以 相对 容易 地 处 理 那 些 限制 。 事 实 上 ， 解 决 办 法 就 像 下 面 这 么 简单 : 



































if(!isSameDomain()){ 
if(options.post || isOldSafariChrome){startXHR();return;} 


} 


服务 端 推送 事件 API 仍然 非常 新 ， 在 接 下 来 的 一 两 年 中 出 现 改 进 也 并 不 稀奇 。 但 即便 是 现 
在 它 就 已 经 非常 有 用 了 ， 我 希望 你 能 发 现 它 在 你 项 目 里 的 更 多 用 处 。 
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35E 标 准 


写作 本 书 的 上 时候， 服务 器 推送 事件 的 官方 标准 是 一 个 “W3C 候选 推荐 标准 "。 最 新 的 发 布 








版 本 参见 http:// www.w3.org/TR/eventsource/。 


A.1 W3C 候 选 推 荐 标准 2012.12.11 
该 版 本 : 
http://www.w3.org/TR/2012/CR-eventsource-20121211/ 
最 新 发 布 版 本 : 
http://www.w3.0org/TR/eventsource/ 
最 新 编辑 草案 : 
http://dev.w3.org/htmlS/eventsource/ 
历史 版 本 : 


http:/www.w3.o0org/TR/2012/WD-eventsource-20121023/ 
http://www.w3.0org/TR/2012/WD-eventsource-20120426/ 
http://www.w3.org/TR/2011/WD-eventsource-20111020/ 
http:/www.w3.org/TR/2011/WD-eventsource-20110310/ 
http://www.w3.org/TR/2011/WD-eventsource-20110208/ 
http://www.w3.org/TR/2009/WD-eventsource-20091222/ 
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http://www.w3.org/TR/2009/WD-eventsource-20091029/ 
http://www.w3.org/TR/2009/WD-eventsource-20090423/ 
编辑 : 
Ian Hickson (ian @hixie.ch，Google 公司 )。 
版 权 声 明 : 


Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, 


trademark and document use rules apply. 


The bulk of the text of this specification is also available in the WHATWG Web Applications 


1.0 specification, under a license that permits reuse of the specification text. 


A.1.1 摘要 
本 标准 以 DOM 事件 的 形式 ， 为 从 服务 器 接收 推送 消息 定义 了 打开 HTTP 连接 的 API。API 
被 设计 成 通过 扩展 可 以 和 短信 推送 之 类 的 其 他 消息 推送 方案 协同 工作 。 


A.1.2 ”本 文档 的 状态 
本 节 描 述 了 本 文档 在 发 布 时 的 状态 。 其 他 文档 可 以 取代 本 文档 。 本 技术 报告 的 当前 W3C 
发 布 版 本 和 最 新 修订 版 列表 ， 参 见 http://www.w3.org/TR/ 的 W3C 技术 报告 索引 (W3C 


technical reports index ) 。 


如 果 想 以 W3C 追踪 的 方式 对 本 文档 进行 评论 ， 可 以 通过 https://www.w3.org/Bugs/Public/ 
describecomponents.cgi?product=WebAppsWG 提交 。 如 果 没 有 帐号 ， 可 以 使 用 http://www. 
w3.org/TR/eventsource/ 的 表单 提交 反馈 。 


也 可 以 将 反馈 意见 发 邮件 至 public-webapps@w3.org (邮件 归档: http:Wlists.w3.org/ 
Archives/Public/public-webapps/， 可 在 该 页 面 订阅 邮件 列表 )， 或 者 whatwg@whatwg.org 
(订阅 : http://lists.whatwg.org/listinfo.cgi/whatwg-whatwg.org， 归 档 : http://lists.whatwg.org/ 

















pipermail/whatwg-whatwg.org/)。 欢 迎 反 馈 。 
本 标准 以 及 相关 标准 的 修改 通知 将 以 如 下 机 制 发 送 : 
电子 邮件 通知 修改 


Commit-Watchers 邮件 列表 (完整 源码 差异 ) : http://lists.whatwg.org/listinfo.cgi/commit- 


watchers-whatwg.org 
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可 浏览 的 所 有 修改 版 本 控制 记录 : 


有 并 排 的 文件 差异 比较 的 CVSWeb 界面 : http:Wdev.w3.org/cvsweb/html5/ 
有 统一 文件 差异 比较 的 注释 摘要 : http://html5.org/tools/web-apps-tracker 
原始 的 Subversion 接口 : svn checkout http://svn.whatwg.org/webapps/ 


W3C 网 络 应 用 工作 组 是 负责 本 标准 W3C 推荐 标准 追踪 进展 的 W3C 工作 组 。 本 标准 是 
2012 年 12 月 11 日 的 候选 推荐 标准 。 没 有 关于 2012 年 10 月 23 日 最 终 草案 的 注解 或 bug。 


以 候选 推荐 标准 发 布 并 不 意味 着 被 W3C 成 员 认 可 。 这 是 一 个 文档 草案 ， 随 时 可 能 被 其 他 
文档 更 新 、 取 代 或 废止 。 不 宜 将 本 文档 引用 为 非 进行 中 的 作品 。 


本 文档 由 一 个 遵循 2004 年 2 月 5 日 W3C 专 利 政策 (http:/www.w3.org/Consortiumy 
Patent-Policy-20040205/) 的 小 组 创作 。W3C 维护 了 一 个 与 工作 组 相关 联 的 公布 任何 专 
利 的 公共 列表 (http:Wwww.w3.org/2004/01/pp-impl42538/status) ， 这 个 页 面 也 包含 了 公 
布 一 个 专利 的 说 明 。 根 据 W3C 专利 政策 第 6 节 (http://www.w3.org/Consortium/Patent- 
Policy-20040205/#sec-Disclosure)， 任 何 知 道 一 个 专利 包含 了 必要 要 求 (http://www.w3.org/ 
Consortium/Patent-Policy-20040205/#def-essential) 的 个 人 ， 必 须 公 布 这 些 信 息 。 


候选 推荐 标准 退出 条 件 


要 退出 候选 推荐 (CR) 状态 ， 必 须 满足 以 下 条 件 。 





(1) 必须 有 至 少 两 个 可 操作 的 实现 方案 通过 了 本 标准 测试 包 (http://w3c-test.org/webapps/ 
ServerSentEvents/tests/) 中 所 有 认可 的 测试 用 例 。 一 个 实现 方案 必须 是 可 获取 ( 即 可 以 
下 载 )、 可 分 享 ( 即 非 私 有 ) 并 且 不 是 试验 性 的 〈 即 面向 广大 用 户 )。 工 作 组 会 决定 测试 
包 什 么 时 候 达 到 了 可 以 充分 测试 可 交互 性 的 品质 ， 并 且 会 写 出 一 个 实现 报告 (附属 在 测 
试 包 中 )。 

(2) 必须 在 CR 状态 停留 至 少 两 个 月 (也 就 是 在 2013 年 2 月 11 日 以 后 )。 这 是 为 了 保障 有 
足够 的 时 间 发 现 重大 错误 。 如 果实 现 方案 出 现 比较 慢 的 话 ，CR 期 会 延长 。 





A.1.3 目录 
(1) 引言 

(2) 一 致 性 要 求 
(3) 术语 


(4) EventSource 接口 
(5) 处 理 模型 

(6) 解析 事件 流 

(7) 解释 事件 流 

(8) 注意 事项 
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(9) 无 连接 推送 和 其 他 特性 
(10) 垃圾 回收 

(11) IANA 须知 

(12) 参考 文献 

(13) 致谢 


A.1.4 引言 
本 节 是 非 规范 性 的 。 


为 确保 服务 器 通过 HITP 或 专门 的 服务 端 推 送 协 议 向 网 页 推送 数据 ， 本 标准 引入 了 


EventSource (参见 http://www.w3.org/TR/eventsource/##eventsource) 接口 。 








本 接口 的 使 用 包含 了 创建 Eventsource 对 象 和 注册 事件 侦 听 。 





var source = new 
EventSource('updates.cgi'); source.onmessage = function (event) { 
alert(event.data); }; 





在 服务 端 ， 脚 本 (这 里 指 updates.cgi) 用 下 面 的 格式 ， 以 text/event-stream 这 种 MIME 类 
型 发 送 消 息 : 











data: This is the first message. 
data: This is the second message, it data: has two lines. data: This is 
the third message. 








可 以 用 不 同 的 事件 类 型 来 区 分 事件 。 下 面 这 段 数据 流 有 两 种 事件 类 型 ，add 和 remove: 


event: add data: 73857293 event: 
remove data: 2153 event: add data: 113411 

















处 理 这 段 数 据 流 的 脚本 如 下 所 示 (addHandler 和 removeHandler 是 接收 事件 对 象 这 一 个 参 
数 的 函数 ) : 





var source = new 
EventSource('updates.cgi'); source.addEventListener('add', addHandler, 
false); source.addEventListener('remove', removeHandler, false); 


默认 的 事件 类 型 是 message。 


事件 流 请 求 可 以 像 普通 HTTP 请 求 一 样 用 HTTP 301 和 HTTP 307 重 定向 。 客 户 端 可 以 在 
连接 关闭 时 重新 连接 ， 可 以 用 HTTP 204 无 内 容 响 应 码 告 知客 户 端 停止 重 连 。 








使 用 本 API， 而 不 是 用 xMLHttpRequest 或 iframe 仿效 ， 可 以 在 终端 实现 者 和 网 络 运营 商 能 
够 预先 协作 的 情况 下 ， 使 客户 端 更 好 地 利用 网 络 资源 。 在 所 有 的 收益 中 ， 这 会 显著 节省 便 
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携 设 备 的 耗 电 
中 深入 探讨 。 


部 














这 会 在 A.1.2 (http://www.w3.org/TR/eventsource/#eventsource-push) 


A.1.5 一 致 性 要 求 
本 标准 中 所 有 的 图 表 、 示 例 以 及 注释 都 是 非 规 范 性 的 ， 每 一 闻 也 都 显著 标识 为 非 规范 性 。 
本 标准 其 他 一 切 都 是 规范 的 。 




















本 文档 规范 部 分 的 关键 字 MUST (必须 )、MUST NOT (不 准 / 禁 止 )、REQUIRED (要 求 )、 
SHOULD (应 该 )、SHOULD NOT (不 应 该 )、RECOMMENDED (推荐 )、MAY (可 能 )，0OPTIONAL (可 
选 的 ) 会 在 RFC2119 中 加 以 解释 。 为 了 方便 阅读 ， 这 些 词 再 本 规范 中 不 会 都 以 大 写字 母 出 
现 。[RFC2119] (http://www.w3.org/TR/eventsource/#refsRFC2119) 


算法 命令 中 标 出 的 要 求 (比如 “删除 字符 串 前 面 的 空 字 符 ” 或 者 “返回 false 并 且 中 止 这 
些 步骤 ”) 将 会 用 介绍 这 个 算法 的 关键 字 (must、should、may， 等 等 ) 的 意思 解释 。 

有 一 些 一 致 性 要 求 描述 为 关于 属性 、 方 法 和 对 象 的 要 求 。 这 些 要 求 会 被 解释 为 终端 相关 的 
要 求 。 

















只 要 结果 是 一 样 的 ， 以 算法 或 专门 步 又 描述 的 一 致 性 要 求 可 以 用 任何 方式 实现 。( 实 际 上 ， 
本 标准 所 定义 的 算法 是 为 方便 而 不 是 为 性 能 实现 的 。) 

本 标准 定义 的 唯一 的 一 致 性 类 是 终端 。 
终端 可 以 在 其 他 不 受 约束 的 输入 上 强加 实现 特有 的 限制 ， 比 如 为 防止 拒绝 服务 攻击 ， 为 防 
止 耗 尽 内 存 ， 或 者 为 绕 开平 台 特 有 的 限制 。 


























如 果 某 项 特性 的 支持 被 禁用 〈 比 如 ， 为 缓解 一 个 安全 问题 的 紧急 措施 ， 或 者 为 帮助 开发 ， 
或 者 为 性 能 原因 )， 终 端 必须 表现 得 无 论 如 何 都 不 支持 这 项 特性 ， 并 且 就 像 本 标准 中 没有 
这 项 特性 。 比 如 ， 如 果 某 个 特性 是 通过 一 个 Web IDL 接口 的 属性 访问 ， 那 这 个 属性 应 该 从 
实现 了 这 个 接口 的 对 象 移 除 : 将 这 个 属性 保留 在 对 象 上 ， 但 使 它 返 回 空 值 或 者 抛 出 一 个 异 
党 是 不 够 的 。 


2.1 依赖 
本 标准 依赖 于 如 下 数 个 其 他 标准 。 





























HIML 


许多 HTML 的 基本 概念 被 本 标准 所 采用 。[HTML (http://www.w3.org/TR/eventsource/ 
#refs HTML) ] 
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WebIDL 


本 标准 的 IDL 部 分 使 用 了 WebIDL 标准 的 语法 。[WEBIDL] (http://www.w3.org/TR/ 
eventsource/#refsWEBIDL ) 


WebMessaging 


MessageEvent 的 定 义 参 见 [WEBMESSAGING] (http:/www.w3.org/TR/eventsource/ 
#refsWEBMESSAGING). 


A.1.6 术语 

“一 个 Foo 对 象 ” 这 种 句法 (Foo 实际 上 是 一 个 接口 ) 经 常用 来 取代 更 精确 的 句法 “一 个 实 
现 了 Foo 接口 的 对 象 ”。 

DOM 这 一 术语 用 于 表示 Web 应 用 中 可 被 脚本 访问 的 接口 集 ， 不 需要 表明 存在 真实 
Document 对 象 或 任何 其 他 DOM Core 标准 定义 的 Node 对 象 。[DOMCORE] (http:/www. 
w3.0rg/TR/eventsource/#refsDOMCORE ) 








IDL 属性 的 值 被 返回 称 为 取 值 比如， 通过 脚本 )，IDL 属性 被 赋予 一 个 新 值 称 为 设 值 。 


A.1.7” EventSource 接 口 


[Constructor(DOMString url, optional EventSourceInit eventSourceInitDict)] 
interface EventSource : EventTarget { 

readonly attribute DOMString url; 

readonly attribute boolean withCredentials; 


// 准备 状态 

const unsigned short CONNECTING = 0; 

const unsigned short OPEN = 1; 

const unsigned short CLOSED = 2; 

readonly attribute unsigned short readyState; 





// 网 络 事件 

attribute EventHandler onopen; 
attribute EventHandler onmessage; 
attribute EventHandler onerror; 
void close(); 


}; 


dictionary EventSourceInit { 
boolean withCredentials = false; 
}; 
EventSource() 构造 函数 接收 一 到 两 个 参数 。 第 一 个 指定 要 连接 的 URL， 第 二 个 以 
EventSourceInit (http://www.w3.org/TR/eventsource/##eventsourceinit) 字典 的 格式 指定 配置 
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(如 果 有 的 话 )。 当 调用 EventSource() 构造 函数 时 ， 终端 必须 执行 以 下 步 又 。 


(1) 解析 第 一 个 参数 指定 的 URL, 相 对 于 入 口 脚 本 的 基准 网 址 (Base URL)。[HTML] (http:/ 
www.w3.0org/TR/eventsource/#refsHTML) 

(2) 如 果 上 一 步 失败 ， 抛 出 一 个 SyntaxError 异常 。 

(3) 创建 一 个 新 的 EventSource 对 象 。 

(4) 将 CORS 模式 设置 为 匿名 。 

(5) 如 果 有 第 二 个 参数 ， 并 且 字 典 成 员 withCredentialts 值 为 true， 则 将 CORS 模式 设置 为 
使 用 证 书 并 且 初 始 化 新 的 EventSource 对 象 的 withCredentials 属性 为 true。 

(6) 返回 新 的 Eventsource 对 象 ， 并 且 在 后 台 继续 这 些 步骤 (不 阻塞 脚本 执行 )。 

(7) 用 入 口 脚 本 的 引用 来 源 对 解析 结果 绝对 URL 进行 一 次 潜在 允许 CORS 的 抓 取 ， 模 式 为 
CORS 模式 ， 域 为 入 口 脚本 的 域 ， 如 果 获 得 资源 ， 以 下 面 描述 的 方式 处 理 。 
































抓 取 算法 (CORS 使 用 ) 的 定义 如 下 : 如 果 浏 览 器 已 经 取得 给 定 的 绝对 URL 
所 标识 的 资源 ， 这 个 连接 可 以 复 用 ， 而 不 用 建立 一 个 新 连接 。 在 这 种 情况 
下 ， 到 目前 为 止 接收 的 所 有 消息 会 立即 发 送出 去 。 

















当 脚 本 的 全 局 对 象 是 一 个 Window 对 象 或 一 个 实现 了 WorkerUtils 接口 的 对 象 ， 这 个 构造 图 
数 必须 是 可 见 的 。 





url 属性 必须 返回 绝对 URL， 即 传 给 构造 函数 的 URL 解析 结果 。 





withCredentials 属性 必须 返回 它 最 后 初始 化 的 值 。 当 对 象 被 创建 时 ， 它 必须 被 初始 化 为 


faLse。 





readyState 属性 代表 了 连接 状态 。 它 可 以 有 下 列 值 。 





CONNECTING (数值 为 0) 


连接 尚未 建立 ， 或 者 已 经 关闭 ， 并 且 终 端 在 重 连 。 





OPEN (数值 为 1) 
终端 有 一 个 打开 的 连接 并 且 会 在 接收 到 事件 时 派发 它们 。 


CLOSED (数值 为 2) 





连接 没有 打开 ,终端 没 有 尝试 重 连 。 要 么 是 出 现 了 致命 错误 ， 要 么 是 调用 了 close() 方法 。 


对 象 创建 时 ， 它 的 readystate 必须 设置 为 CONNECTING(0)。 如 下 处 理 连接 的 规则 定义 了 这 
些 值 何 时 改变 。 
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clLose() 方法 必须 中 止 本 Eventsource 对 象 局 动 的 一 切 抓 取 算 法 实例 ， 并 且 必 须 设置 
readyState 属性 值 为 CLOSED。 


下 面 这 些 IDL 属性 形式 的 事件 处 理 程序 (以 及 它们 对 应 的 所 处 理 的 事件 类 型 )， 必 须 被 所 
有 实现 了 EventSource 接口 的 对 象 文 持 。 











事件 处 理 程序 所 人 处理 的 事件 类 型 
onopen open 

onmessage message 

onerror error 





作为 上 面 的 补充 ， 每 个 EventSource 对 象 都 有 如 下 关联 


。 以 宣 秒 为 单位 的 重 连 时 间 。 它 的 初始 值 必须 由 终端 定义 ， 取 值 范围 大 概 为 几 秒 。 
。 最 后 事件 ID 字符 串 。 它 的 初始 值 必须 是 空 字符 串 。 


接口 现在 没有 暴露 这 些 值 。 
































A.1.8 处 理 模 型 


参数 中 指定 给 EventSource (http:/www.w3.org/TR/eventsource/ 检 eventsource) 构造 函数 的 
资源 会 在 构造 函数 运行 时 拉 取 。 


对 HTTP 连接 来 说 ， 可 能 会 引入 Accept 请 求 头 。 如 果 引 入 了 ， 必 须 只 包含 终端 支持 的 事 
件 框架 格式 (其 中 一 个 必须 是 text/event-stream (http://www.w3.org/TR/eventsource/##text- 
event-stream) ， 下 文 会 讲 到 ) 。 


























如 果 事 件 源 的 最 后 事件 ID 字符 串 (http://www.w3.org/TR/eventsource/#concept-event- 
stream-last-event-id) 不 为 空 ， 那 么 请 求 中 必须 包含 一 个 Last-Event-ID (http://www.w3.org/ 
TR/eventsource/##last-event-id) 的 HTTP 请求 头 ， 它 的 值 为 事件 源 的 最 后 事件 ID 字符 串 ， 
编码 为 UTF-8。 











终端 应 该 在 请 求 中 使 用 Cache-Control: no-cache 来 为 事件 源 请 求 绕 开 缓存 。( 这 个 请 求 头 
不 是 一 个 自 定义 请 求 涉 ， 所 以 终端 仍然 会 使 用 CORS 简单 跨 域 请 求 机 制 。) 终端 应 该 在 响 
应 中 忽略 HTTP 缓存 请 求 头 ， 绝 不 缓存 事件 源 。 


一 旦 接收 到 数据 ， 排 在 网 络 任务 源 后 面 、 用 以 处 理 数 据 的 任务 必须 按 如 下 方式 执行 





响应 码 为 HTTP 200 OK， 包 含 一 个 指定 类 型 为 text/event-stream 的 Content-Type 请 求 头 ， 
忽略 任何 MIME 类 型 的 参数 ， 必 须 依 下 文 所 述 的 方式 逐 行 处 理 (http://www.w3.org/TR/ 


eventsource/#event-stream-interpretation ) 5 





当 接 收 到 支持 的 MIME 类 型 的 成 功 响 应 ， 终 端 就 开始 解析 数据 流 的 内 容 ， 终 端 必 须 广播 这 
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个 连接 (http:Wwww.w3.org/TR/eventsource/#announce-the-connection ) 。 


网 络 任务 源 在 该 资源 (正确 的 MIME 类 型 ) 抓 取 算法 完成 时 安置 在 任务 队列 里 的 任务 必须 
击 发 终端 异步 重建 连接 (http://www.w3.org/TR/eventsource/#reestablish-the-connection)。 无 

论 连 接 是 正常 关闭 或 异常 关闭 ， 这 一 点 都 适用 于 。 但 它 不 适用 于 以 下 错误 情况 ， 除 非 是 显 
式 指 定 。 


响应 码 为 HITP 200 OK， 但 Content-Type 指定 了 一 种 不 支持 的 类 型 ， 或 者 根本 没有 
Content-Type， 这 种 情况 必须 触发 终端 连接 失败 (http:Wwww.w3.org/TR/eventsource/#fail- 


the-connection ) 。 











HTTP 305 Use Proxy、401 Unauthorized 以 及 407 Proxy Authentication Required 应 该 透明 地 
被 其 他 子 资源 处 理 。 














HTTP 301 Moved Permanently、302 Found、303 See Other 以 及 307 Temporary Redirect 
是 用 抓 取 和 CORS 算法 处 理 。 在 301 重 定向 的 情况 中 ,终端 必须 也 记 住 新 URL， 以 便 
EventSource 对 该 资源 的 后 续 请 求 以 该 对 象 这 些 请 求 的 最 后 一 个 301 提供 的 URL 开始 。 





























HTTP 500 Internal Server Error、502 Bad Gateway、503 Service Unavailable 以 及 504 
Gateway Timeout 响应 ， 以 及 任何 会 首先 阻止 建立 连接 的 网 络 错误 〈 比 如 DNS 错误 )， 必 
须 触发 终端 异步 重建 连接 。 


其 他 任何 没有 在 这 里 列 出 的 HTTP 响应 码 必 须 触 发 终端 连接 失败 。 
对 于 非 HTTP 协议 ， 终 端 应 该 以 同等 方式 表现 。 


当 终 端 要 宣布 连接 ， 它 必须 启动 这 样 一 个 任务 ， 如 果 readystate 属性 的 值 不 为 
“CLOSED - ， 设 置 readyState 值 为 OPEN， 并 在 Event0bject 对 象 上 触发 一 个 open 事件 。 














当 终 端 要 重建 一 个 连接 ， 必 须 按 以 下 步骤 进行 。 这 些 步 骤 是 异步 进行 的 ， 不 是 某 个 任务 的 
一 部 分 〈 队 列 中 的 任务 ， 当 然 是 像 普通 任务 一 样 并 且 不 是 异步 的 )。 


(1) 将 运行 如 下 步骤 的 任务 加 入 队列 。 
a. 如 果 readyState 属性 值 为 CLOSED， 终 止 该 任务 。 
b. 设置 readySstate 属性 值 为 CONNECTING 。 
c. 在 EventSource 对 象 上 触发 一 个 error 事件 。 



































(2) 等 待 一 段 与 事件 源 重 连 时 间 等 长 的 延 时 。 











(3) 可 以 选择 等 待 更 长 时 间 ， 特 别 是 当 之 前 的 尝试 失败 ， 终 端 会 引入 一 个 指数 回 退 延 时 ， 以 
避免 对 一 个 可 能 已 经 过 载 的 服务 器 再 超载 。 替 代 方 案 是 ， 如 果 操 作 系统 已 经 报告 了 没 
有 网 络 连接 ， 终 端 可 以 等 待 操作 系统 通知 有 连接 时 再 重 试 。 
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(4) 如 果 它 还 没有 运行 的 话 ， 等 到 前 面 提 到 的 任务 已 经 运行 。 


(5) 将 运行 如 下 步骤 的 任务 加 入 队列 。 
a. 如 果 readyState 属性 值 不 为 CONNECTING， 终 止 这 些 步 又 。 
b. 用 相同 的 引用 源 以 及 相同 的 模式 和 域 ， 执 行 一 个 潜在 的 、 允 许 跨 域 的 、 对 事件 源 资 
源 绝对 地 址 的 数据 抓 取 ， 就 像 被 EventSource() 构造 函数 触发 的 原始 请 求 所 使 用 的 那 
样 。 如 果 有 的 话 ， 处 理 这 次 获取 的 资源 ， 就 如 本 市 前 面 所 描述 的 那样 。 


当 终 端 连 接 失 败 ， 必 须 在 队列 中 加 入 一 个 任务 。 如 果 readyState 属性 值 不 为 CLOSED， 设 置 
readyState 值 为 CLOSED 并 且 在 EventSource 对 象 上 触发 一 个 简单 的 error 事件 。 一 旦 终端 
连接 失败 ， 它 不 会 尝试 重 连 ! 






























































EventSource 对 象 入 队 的 任何 任务 的 任务 源 都 是 远程 事件 任务 产 。 


A.1.9 解析 事件 流 


该 事件 流 格 式 的 MIME 类 型 是 text/event-stream。 
该 事件 流 格式 由 如 下 ABNF stream 产品 描述 ， 它 的 字符 集 是 Unicode。ABNF 


stream = [ bom ] *event event = 
*( comment / field ) end-of-line comment = colon *any-char end-of-line 
field = 1*name-char [ colon [ space ] *any-char ] end-of-line 
end-of-line = ( cr lf / cr / lf ) ; characters lf = %x000A ; U+000A LINE 
FEED (LF) cr = %x000D ; U+000D CARRIAGE RETURN (CR) space = %x0020 ; 
U+0020 SPACE colon = %x003A ; U+003A COLON (:) bom = %xFEFF ; U+FEFF 
BYTE ORDER MARK name-char = %x0000-0009 / %x000B-000C / %x000E-0039 / 
%x003B-10FFFF ; a Unicode character other than U+000A LINE FEED (LF), ; 
U+000D CARRIAGE RETURN (CR), or U+003A COLON (:) any-char = %x0000-0009 
/ %x000B-000C / %x000E-10FFFF ; a Unicode character other than U+000A 
LINE FEED (LF) ; or U+000D CARRIAGE RETURN (CR) 


这 种 格式 的 事件 流 必 须 总 是 以 UTF-8 编码 。RFC3629 





行 分 隔 符 必须 是 U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 字符 对 [一 
个 U+000A LINE FEED (LF) 字符 ]， 或 者 是 一 个 单个 的 U+000D CARRIAGE RETURN 
(CR) 字符 。 


I ie 建立 连接 被 料 定 为 是 长 连接 ， 终 端 需要 确保 使 用 合适 的 组 
冲 。 | 是 当 多 行 的 行 缓冲 被 定义 为 以 一 个 U+000A LINE FEED (LF) 字符 结束 是 安全 
的 ， Wer 结束 符 的 行 缓冲 会 引起 事件 派发 的 延迟 。 


A.1.10 解释 事件 流 


数据 流 必 须 以 UTF-8 编码 ， 并 具有 错误 处 理 。HTML 
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一 行 开始 的 任何 U+FEFF BYTE ORDER MARK 字符 必须 忽略 (如 果 有 的 话 )。 


数据 流 必 须 被 逐 行 解析 ， 一 行 的 结束 是 以 一 个 U+000D CARRIAGE RETURN U+000A 
LINE FEED (CRLF) 字符 对 [一 个 没有 跟 在 U+000D CARRIAGE RETURN (CR) 之 后 
的 U+000A LINE FEED (LF) 字符 ] 和 一 个 没有 在 U+000A LINE FEED (LF) 之 前 的 
U+000D CARRIAGE RETURN (CR) 字符 。 





当 一 个 数据 流 被 解析 ， 必 须 有 与 之 关联 的 数据 缓冲 、 事 件 类 型 缓冲 和 一 个 最 后 事件 ID 组 
冲 。 它 们 的 初始 值 必须 是 空 字符 串 。 


行 必须 以 它们 接收 的 顺序 处 理 ， 如 下 所 示 。 





如 果 该 行 是 空 的 ( 空 行 ) 触发 事件 (http://www.w3.org/TR/eventsource/#dispatchMessage)， 
依 如 下 定义 。 


如 果 该 行 以 U+003A COLON 字符 (:) 开始 
忽略 这 一 行 。 


如 果 该 行 包含 一 个 U+003A COLON (:) 字符 








收集 第 一 个 U+003A COLON 字符 (:) 之 前 的 字符 ， 将 其 作为 字段 。 收 集 第 一 个 U+003A 
COLON 字符 (:) 之 后 的 字符 ， 将 其 作为 值 ， 如 果 值 以 一 个 U+0020 SPACE 字符 开始 ， 
将 其 从 值 中 移 除 。 依 照 如 下 步骤 处 理 字 段 ， 将 字段 作为 字段 名 ， 将 值 作 为 字段 值 。 


另外 ， 字 符 串 不 为 空 但 是 不 包含 一 个 U+003A COLON 字符 (:) 
依照 如 下 步骤 处 理 字段 ， 用 整 行 作为 字段 名 ， 用 空 字 符 串 作为 字段 值 。 


一 旦 到 达 文 件 最 后 ， 任 何 挂 起 的 数据 必须 废弃 (如果 文件 在 事件 中 间 结 束 ， 在 最 后 的 空 行 
之 前 ， 这 个 未 完成 的 事件 不 会 派发 ) 。 


给 定 字段 名 和 字段 值 的 字段 处 理 步 骤 取 决 于 字段 名 ， 如 下 列表 所 示 。 字 段 名 必须 字面 匹 
配 ， 没 有 大 小 写 藤 和 套 。 


如 果 字 段 名 是 “event” 
设置 事件 类 型 缓冲 为 字段 值 。 
如 果 字 段 名 是 “data” 


将 字段 值 附 加 到 数据 缓冲 ， 然 后 附加 一 个 单个 的 U+000A LINE FEED (LF) 字符 到 数据 
缓冲 。 
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如 果 字 段 名 是 “id” 
设置 事件 ID 缓冲 为 字段 值 。 
如 果 字 段 名 为 “retry” 


如 果 字 段 值 仅 由 ASCII 数字 构成 ， 则 将 字段 值 解析 为 一 个 十 进 制 整 数 ， 然 后 将 其 设置 
为 事件 流 的 重 连 时 间 。 否 则 ， 名 略 这 个 字段 。 


其 他 
忽略 字段 。 
当 终 端 被 要 求 派发 事件 ， 终 端 必 须 以 如 下 步骤 执行 。 


(1) 设置 事件 源 的 最 后 事件 ID 字符 串 为 最 后 事件 DD 缓冲 的 值 。 缓 冲 不 会 重 置 ， 所 以 事 们 
源 的 最 后 事件 ID 会 一 直 是 这 个 值 ， 直 到 服务 端 下 一 次 修改 。 

(2) 如 果 数 据 缓冲 是 一 个 空 字符 串 ， 设 置 数据 缓冲 和 事件 类 型 缓冲 为 空 字符 串 并 且 终 止 这 

(3) 如 果 数 据 缓冲 的 最 后 字符 是 U+000A LINE FEED (LF)， 则 从 数据 缓冲 中 将 该 字符 移 除 。 

(4) 创建 一 个 使 用 MessageEvent 接口 的 事件 ， 事 件 类 型 为 message。 它 没有 冒 泡 ， 不 可 取 

消 ， 没 有 默认 行为 。data 属性 必须 初始 化 为 数据 缓冲 的 值 ，origin 属性 必须 初始 化 为 

事件 流 最 后 的 URL 经 Unicode 序列 化 之 后 的 域 (比如 重 定向 之 后 的 URL)，lastEven- 
tId 属性 必须 初始 化 为 事件 源 的 最 后 事件 ID 字符 串 。 该 事件 是 不 可 信 的 。 

(5) 如 果 事 件 类 型 缓冲 有 值 而 不 是 一 个 空 字符 串 ， 将 新 创建 的 事件 的 类 型 设置 为 事件 类 型 
缓冲 的 值 。 

(6) 设置 数据 缓冲 和 事件 类 型 缓冲 为 空 字符 串 。 

(7) 将 一 个 任务 排 和 队列， 如 果 readystate 属性 值 不 是 CLOSED， 派 发 EventSource 对 象 新 
创建 的 事件 。 





让 


















































如 果 事 件 没 有 “id” 字 段 ， 但 是 之 前 的 事件 确实 设置 了 事件 源 的 最 后 事件 ID 
字符 串 ， 那 么 事件 的 LastEventId 字段 会 设置 为 “id” 字 段 最 后 的 任何 值 。 

















下 面 的 事件 流 ， 后 面 一 旦 是 一 个 空 行 : 
data: YHOO data: +2 data: 10 


会 引起 EventSource 对 象 派发 一 个 MessageEvent 接口 的 message 事件 。 事 件 的 data 属性 会 
包含 YHOON +2\n10 字符 串 〈( 代表 一 个 新 行 )。 























可 能 会 像 下 面 这 样 使 用 : 
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var stocks = new 
EventSource("http://stocks.example.com/ticker .php"); stocks.onmessage = 
function (event) { var data = event.data.split('\n'); 
updateStocks(data[0], data[1], data[2]); }; 


updateStocks() 是 一 个 函数 ， 定 义 如 下 所 示 : 


function updateStocks(symbol, 
delta, value) { ... } 


或 者 是 类 似 的 定义 。 


下 面 的 数据 流 包含 了 4 个 块 。 第 一 块 只 有 一 个 注释 ， 并 不 会 触发 任何 事件 。 第 二 块 有 两 个 
名 字 分 别 为 “data” 和 “id” 的 字段 ， 这 个 块 会 触发 一 个 事件 ， 带 着 数据 “first event”， 然 
百 会 设置 最 后 事件 ID 为 “1”， 以 便 如 果 在 这 一 块 和 下 一 块 之 间 连 接 断 开 ， 服 务 端 可 以 发 
送 一 个 值 为 “1” 的 Last-Event-ID 请 求 头 。 第 三 块 触发 一 个 数据 为 “second event” 的 事 
件 ， 并 且 也 有 “id” 字 段 ， 这 一 次 没有 值 ， 重 置 了 最 后 事件 ID 为 空 字符 串 (意味 着 在 尝 
试 重 连 事件 中 不 会 发 送 Last-Event-ID 请 求 头 )。 最 终 ， 最 后 一 块 只 是 触发 数据 为 “third 
event” 的 事件 《有 一 个 前 置 的 空格 字符 )。 注 意 ， 最 后 一 个 块 仍然 需要 用 空 行 结束 ， 数 据 
流 的 结束 不 足以 触发 最 后 事件 的 派发 。 


: test stream data: first event 
id: 1 data:second event id data: third event 


接 下 来 的 数据 流 触 发 两 个 事件 : 


data data data data: 





























第 一 块 触发 数据 为 空 字符 串 的 事件 ， 最 后 一 块 如 果 后 面 跟着 一 个 空 行 的 话 也 会 这 样 。 中 间 
的 块 触发 数据 为 单个 新 行 字符 的 事件 。 最 后 的 块 因为 没有 跟着 一 个 空 行 而 被 废弃 。 


下 面 的 数据 流 触 发 两 个 完全 相同 的 事件 : 


data:test data: test 























因为 冒号 后 面 如 果 出 现 空格 会 被 忽略 。 





A.1.11 注意 事项 
据 了 解 ， 在 某 些 情况 下 ， 遗 留 代理 服务 器 会 在 短暂 的 超时 之 后 丢弃 HTTP 连接 。 为 避免 这 
类 代理 服务 器 的 问题 ， 开 发 者 可 以 大 概 每 15 秒 发 送 一 个 注释 行 (以 : 字符 开始 )。 


开发 者 们 希望 可 以 将 事件 源 连 接 彼 此 关联 或 者 关联 到 之 前 有 用 的 规范 性 文档 ， 他 们 会 发 现 
依赖 耳 地 址 不 可 行 ， 因 为 个 别 的 客户 端 会 有 多 个 瑟 地址 《有 多 个 代理 服务 器 ) ， 个 别 的 
IP 地 址 能 有 多 个 客户 端 (共享 一 个 代理 服务 器 )。 最 好 是 在 使 用 时 将 唯一 标识 符 引 入 文档 ， 
然后 在 连接 建立 后 将 标识 符 作 为 URL 的 一 部 分 传递 。 
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开发 者 们 也 会 被 告 诚 HTTP 分 块 在 协议 的 可 靠 性 方面 有 一 些 意 料 之 外 的 负面 影响 。 如 果 可 
能 ,支持 数据 流 时 应 该 禁用 分 块 ， 除 非 消 息 频 率 不 会 引起 问题 。 


如 果 打 开 多 个 连接 同一 个 站 点 的 页 面 ， 并 且 每 个 页 面 有 一 个 连接 同一 域名 的 EventSource 
对 象 ， 支 持 HTTP 单个 服务 器 连接 限制 的 客户 端 可 能 会 有 问题 。 开 发 者 们 可 以 通过 使 用 
相对 复杂 的 机 制 避免 这 种 问题 ， 即 每 个 连接 使 用 独立 的 域名 ， 或 者 允许 用 户 在 单 页 层面 启 
用 或 禁用 EventSource 功能 ， 或 者 通过 使 用 一 个 共享 的 Worker 分 享 单个 的 EventSource 对 
象 。WEBWORKERS (www.w3.org/TR/eventsource/#refsWEBWORKERS) 












































A.1.12 无 连接 推送 和 其 他 特性 
运行 在 一 个 受 限 环境 的 终端 ， 比 如 与 特定 运行 商 捆绑 的 手机 ， 可 能 把 连接 管理 转 接 给 网 络 
代理 。 在 这 种 情况 下 ， 出 于 一 致 性 的 目的 ， 终 端 会 同时 包含 手机 软件 和 网 络 代理 。 


比如 ， 一 台 移动 设备 上 的 浏览 器 ， 在 已 经 建立 连接 后 ， 可 能 检测 到 它 在 一 个 支持 网 络 上 ， 
并 且 请 求 网 络 上 的 一 个 代理 来 接管 连接 管理 。 这 种 情况 的 时 间 轴 将 如 下 所 示 。 




















(1) 浏览 器 连接 到 一 个 远程 HTTP 服务 器 ， 并 且 请 求 开 发 者 在 EventSource 构造 函数 中 指定 
的 资源 。 

(2) 服务 端 发 送 临 时 性 消息 。 

(3) 在 两 次 消息 之 间 ， 浏 览 器 检测 出 它 是 用 置 的 ， 只 有 用 以 保持 TCP 连接 活跃 的 网 络 活动 ， 
于 是 决定 切换 到 休眠 模式 以 节省 电力 。 

(4) 浏览 器 与 服务 器 断 开 连接 。 

(5) 浏览 器 联系 上 了 网 络 上 的 一 个 服务 , 并 且 请 求 那个 服务 , 一 个 “推送 代理 ”, 来 维护 连接 。 

(6) 推送 代理 "服务 联系 远程 的 HITP 服务 器 ,并 且 请 求 开 发 者 在 EventSource 构造 国 数 (可 
能 包含 一 个 Last-Event-ID HTTP 请 求 头 ， 等 等 ) 中 指定 的 资源 。 

(7) 浏览 器 允许 移动 设备 进入 休眠 。 

(8) 服务 器 发 送 另 一 条 消息 。 

(9) “推送 代理 ”服务 使 用 一 种 诸如 OMA 推送 的 技术 将 事件 传送 给 移动 设备 ， 刚 够 唤醒 来 
处 理事 件 ， 然 后 回 到 休眠 状态 。 


这 可 以 减少 总 的 数据 使 用 量 ， 因 此 可 以 节省 大 量 的 电力 。 



































HH 














就 像 实 现 既 有 的 API 和 本 规范 定义 的 text/event-stream 格式 ， 以 及 更 多 如 上 文 所 述 的 分 布 
式 方 式 ， 其 他 适用 的 规范 定义 的 事件 框架 格式 也 可 支持 ， 本 规范 没有 定义 它们 应 该 如 何 解 
析 或 处 理 。 








A.1.13 垃圾 回收 


当 EventSource 对 象 的 readyState 是 CONNECTING， 并 且 该 对 象 注 册 了 一 个 或 多 个 针对 
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open、message 或 error 事件 的 侦 听 国 数 时 ， 一 定 有 从 调用 EventSource 对 象 构 造 国 数 的 
Window 或 WorkerUtils 对 象 到 EventSource 对 象 自身 的 强 引 用 。 


当 EventSource 对 象 的 readyState 是 OPEN， 并 且 该 对 象 注 册 了 一 个 或 多 个 针对 message 或 
error 事件 的 侦 昕 函数， 一 定 有 从 调用 EventSource 对 象 构造 国 数 的 Mndow 或 WorkerUtitLs 
对 象 到 EventSource 对 象 自身 的 强 引 用 。 








当 远 程 事 件 任务 源 的 EventSource 对 象 将 一 个 任务 加 入 队列 ， 一 定 有 从 调用 EventSource 
对 象 构 造 国 数 的 Mndow 或 WorkerUtils 对 象 到 EventSource 对 象 自身 的 强 引 用 。 





如 果 终 端 要 强制 关闭 一 个 Eventsource 对 象 (这 在 Docunent 对 象 永久 消失 时 会 发 生 )， 终端 必 
须 终止 Eventsource 对 象 启动 的 任何 抓 取 算 法 实例 ， 并 且 必 须 设置 readystate 属性 为 CLOSED。 








如 果 EventSource 对 象 在 它 的 连接 还 处 于 打开 状态 时 被 垃圾 回收 ， 终 端 必 须 终 止 该 
EventSource 对 象 打开 的 任何 抓 取 算法 实例 。 





有 可 能 多 个 EventSource 对 象 以 及 它们 的 抓 取 算 法 共享 一 个 活跃 的 网 络 连 
接 ， 这 就 是 为 什么 上 文 描述 的 是 终止 抓 取 算 法 而 不 是 实际 的 潜在 下 载 。 








A.1.14 IANA 须知 


1. text/event-stream 
这 段 注 册 是 给 社区 评审 用 的 ， 并 且 会 提交 到 下 SG 评审 、 审 批 ， 并 且 对 IANA 注册 。 





类 型 名 称 : 
text 
子 类 型 名 称 : 
event -stream 
没有 参数 。 
可 选 参数 : 
charset 


可 以 提供 charset 参数 ， 参 数值 必须 是 utf-8。 该 参数 没有 特别 目的 ， 只 是 考虑 兼容 中 
留 服务 器 。 
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编码 须知 : 


8 位 (总 是 UTF-8)。 安 全 须知 : 来 自 与 内 容 不 同 域 的 事件 流 会 导致 信息 泄漏 。 要 避免 
这 种 情况 ， 要 求 终端 应 用 CORS 语法 。 

CORS 事件 流 可 以 压 垮 终端 。 终 端 应 该 用 适当 的 限制 避免 
尽 本 地 资源 。 

服务 器 可 能 会 因为 引起 客户 端 非常 迅速 地 重 连 而 被 压 垮 。 服 务 器 应 该 用 一 个 5xx 状态 码 
间 示 能 力 极限 问题 ， 这 会 阻止 客户 端 自动 重 连 。 














Ht 








为 事件 流 的 信息 量 过 多 而 耗 





交互 性 须知 : 


处 理 符 合 规范 和 不 符合 规范 内 容 的 规则 都 在 本 标准 中 定义 。 





已 发 布 的 标准 : 
本 文档 是 相关 标准 。 
使 用 本 媒体 类 型 的 应 用 程序 : 
网 络 浏览 器 和 使 用 网 络 服务 的 工具 。 
其 他 信息 。 
魔法 数字 : 
没有 字 市 序列 可 以 唯一 标识 一 个 事件 流 。 
文件 扩展 名 : 
没有 推荐 给 这 种 类 型 的 专门 的 文件 扩展 名 。 
去 金 塔 文件 类 型 码 ， 
没有 推荐 给 这 种 类 型 的 专门 的 麦 金 塔 文件 类 型 码 。 
欲 知 更 多 信息 ， 请 联系 本 人 : 
Ian Hickson (ian @hixie.ch) 
使 用 预期 : 
公用 。 
使 用 限制 : 
本 格式 预期 使 用 于 以 HITP 或 类 似 协 议 供应 的 动态 开放 式 数 据 流 ， 限 定式 资源 不 适用 这 
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种 类 型 。 
作者 : 
Ian Hickson ian@hixie.ch 
变更 管理 : 
W3C 
片段 标识 符 对 text/event-stream 资源 没有 意义 。 


2. Last-Event-ID 
本 市 描述 了 一 个 注册 在 永久 注册 消息 头 字 段 里 的 请 求 尖 字段 。RFC3864 


请 求 头 字段 名 : 
Last-Event-ID 
试用 协议 : 


http 


标准 。 


作者 / 变更 管理 : 


W3C 
标准 文档 : 

本 文档 是 相关 标准 。 
相关 信息 : 

无 。 


A.1.15 参考 文献 
所 有 被 引用 的 参考 文献 都 是 标准 的 ， 除 非 标记 了 “ 非 标准 ”。 


[ABNF] 


Augmented BNF for Syntax Specifications: ABNF (http://www.ietf.org/rfc/std/std68.txt) ， 
D. Crocker, P. Overell. IETE. 
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[CORS] 
Cross-Origin Resource Sharing (http:Wwww.w3.org/TR/cors/) , A. van Kesteren. W3C. 
[DOMCORE] 
DOM4 (http://www.w3.org/TR/dom/) , A. van Kesteren. W3C. 
[HTML] 
HTML5 (http:/www.w3.org/TR/dom/) ,I. Hickson. W3C. 
[RFC2119] 


Key words for use in RFCs to Indicate Requirement Levels (http://tools.ietf.org/html/rfc2119) ， 
S. Bradner. IETFE. 


[RFC3629] 


UTF-8, a transformation format of ISO 10646 (http://tools.ietf.org/html/rfc3629) ,FF. 
Yergeau. IETF. 


[RFC3864] 


Registration Procedures for Message Header Fields (http://tools.ietf.org/html/rfc3864), G. 
Klyne, M. Nottingham, J. Mogul. IETE. 


[WEBIDL] 

Web IDL (http://heycam.github.io/webidl/) , C. McCormack. W3C. 
[WEBWORKERS] 

Web Workers (http://dev.w3.org/html5/workers/ ) ,I. Hickson. W3C. 
[WEBMESSAGINGI] 


Web Messaging (http://dev.w3.org/html5/postmsg/) ,I. Hickson. W3C. 


A.1.16 ”致谢 


完整 的 致谢 名 单 ， 参 见 HTML 标准 。[HTML] (http://www.w3.org/TR/eventsource/#refs- 
HTML ) 
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附录 B 
重 构 ，JavaScript 全 局 变量 、 


对 象 和 闭 包 





你 知道 用 全 局 变量 不 好 ， 对 吧 ? 一 本 正经 的 计算 机 科学 类 图 书 告诉 了 我 们 这 一 点 。 但 它们 
带 来 非常 多 的 便利 ! 不 必 为 一 个 很 长 的 传 参 列表 而 浪费 时 间 (或 者 把 这 个 很 长 的 参数 列表 
重 构 为 单个 参数 对 象 ， 这 会 使 代码 量 翻 倍 )。 不 需 担心 作用 域 ， 它 们 就 在 那里 (好 吧 ， 在 
JavaScript 以 及 许多 语言 中 是 这 样 的 ， 在 PHP 中 ， 需 要 用 globals 关键 字 声 明 全 局 变量 ， 
或 者 用 $_GLOBALS[])。 当 需要 修改 它们 时 ， 不 需要 担心 返回 值 或 是 引用 参数 的 问题 。 所 以 
不 使 用 全 局 变量 有 什么 好 理由 吗 ? 测试 、 便 利 、 封 装 、 副 作用 ， 等 等 。 


但 是 ， 在 数据 推送 应 用 的 场景 中 ， 有 一 种 情况 下 全 局 变量 会 带 来 证 烦 : 当 需 要 建立 两 个 其 
至 更 多 连接 时 。 

















录 只 探讨 重 构 JavaScript， 使 其 不 使 用 全 局 变量 。 之 所 以 将 其 作为 附录 ， 
为 这 里 介绍 的 是 一 种 通用 的 JavaScript 技术 : 完全 没有 专门 针对 数据 推 
当然 ， 示 例 代码 除外 )。 基 本 上 ， 作 为 附录 是 因为 把 它 作 为 正文 中 的 附 
容 有 点 太 多 了 。 




















B.1 示例 


这 里 会 用 一 个 精简 的 SSE 示例 。 代 码 将 没有 有 趣 的 数据 ， 不 会 有 针对 旧版 浏览 器 的 兼容 代 
码 。 那 些 都 不 会 影响 哪个 方案 更 好 的 决策 ， 它 只 是 加 了 几 行 代码 。 
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首先 来 看 后 端 代码 : 


<?php 
header("Content-Type: text/event-stream"); 


function sendData($data) { 
echo "data:"; 

echo json_encode($data) . "\n"; 
echo "\n"; // 额外 的 空 行 
@flush(); @ob_flush(); 

} 


while (true) { 


switch (rand(1, 10)) { 
Case 1: 
sendData(array("comeBackIn10s" => true)); 
exit; 
Case 2: 
sendData(array("msg" => "About to sleep 10s")); 
sleep(10); // 强制 的 长 连接 延 时 
break; 
default: 
sendData(array("t" => date("Y-m-d H:i:s"))); 
sleep(1); 
break; 
} 





} 


while(true)switch(rand(1,10)){...} 意思 着 无 限 循环 ， 并 且 每 次 循环 随机 选择 要 做 什么 。 
80% 的 时 间 都 会 选中 default: 语句 ， 并 且 只 返回 一 个 时 间 惟 。 在 第 2 章 的 第 一 个 例子 中 已 
经 出 现 过 类 似 代码 ， 所 以 这 里 就 不 再 解释 代码 和 sendData() 函数 了 。 


更 有 趣 的 是 ， 有 10% 的 时 间 (case 2:) 它 会 休眠 10 秒 。 这 是 模拟 一 个 死 掉 的 连接 : 10 
秒 够 用 了 ， 因 为 这 里 会 设置 JavaScript 的 长 连接 超时 时 间 为 5 秒 。 这 里 也 会 返回 一 条 消息 ， 
这 样 当 执行 到 这 里 时 我 们 就 会 看 到 。 




















case 1: 会 怎样 ? 会 返回 一 个 特别 的 标记 ， 然 后 退出 。 这 模拟 了 5.4 贡 中 介绍 的 定期 关闭 方 
案 。 就 如 这 个 标记 名 所 显示 的 那样， 想 要 客户 端 在 10 秒 后 重 连 





来 看 一 下 前 端 代 码 ， 如 下 所 示 : 


<!doctype htmL> 
<htmL> 
<head> 
<meta charset="UTF-8"> 
<title>SSE: Basic With Sleep: Globals</title> 
</head> 
<body> 


<pre id="x">Initializing...</pre> 
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<script> 
var url = "basic with_sleep.php"; 
var es = null; 
var keepaliveSecs = 5; 
var keepaliveTimer = nuLL; 
function gotActivity() { 
if (keepaliveTimer != null) 
clearTimeout(keepaliveTimer); 
keepaliveTimer = setTimeout( 
connect, keepaliveSecs * 1000); 
} 
function connect() { 
document .getElementById("x"). 
innerHTML += "\nIn connect"; 
if (es)es.close(); 
gotActivity(); 
es = new EventSource(url); 
es.addEventListener("message", 
function (e) {processOneLine(e.data);}, 
false); 
} 
function processOneLine(s) { 
gotActivity(); 
document .getElementById("x"). 
innerHTML += "\n" + s; 
var d = JSON.parse(s); 
if (d.comeBackIn10s) { 
if (keepaliveTimer != null) 
clearTimeout(keepaliveTimer); 
if (es)es.close(); 
setTimeout(connect, 10 * 1000); 
} 
} 


setTimeout(connect, 100); 
</script> 


</body> 
</html> 





第 5 童 介 绍 过 ， 全 局 变量 keepaliveSecs 和 keepaliveTimer 以 


及 gotActivity() 函数 一 


起 协作 以 保证 连接 正常 。 在 本 书 的 大 部 分 代码 示例 中 ，connect() 函数 兼 做 了 connect() 
和 startEventSource() 的 工作 。 这 里 只 是 做 了 一 下 简化 ， 因 为 不 需要 处 理 向 后 兼容 。 
processOneLine() 只 是 输出 它 正 接收 的 原始 JSON。processOneLine() 的 第 二 部 分 处 理 了 
comeBackIn10s 消息 (这 与 第 5 章 介 绍 的 temporarilyDisconnect() 国 数 等 效 ) 。 























如 果 你 读 到 这 儿 之 前 没有 读 过 第 3 章 至 第 5 章 ， 并 且 这 让 你 有 些 
体 在 做 什么 放 轻 松 一 点 。 这 里 要 指出 的 重点 是 。 


。 有 4 个 全 局 变量 (一 个 是 参数 ， 其 他 3 个 是 变量 ) 。 
。 这 4 个 函数 每 个 都 用 了 至 少 两 个 全 局 变量 。 

















困惑 ， 大 可 对 这 段 代码 具 
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由 





。 connect() 会 从 下 面 3 个 不 同 的 地 方 调用 。 
一 全 局 代码 的 初始 化 调用 (实际 上 延 时 了 100 毫秒 ) 。 
一 长 连接 超时 以 后 。 
一 在 一 个 请 求 返回 10 秒 以 后 。 
。 当 调 用 connect() 时 , 在 创建 新 连接 之 前 会 关闭 前 一 个 连接 , 这 是 es (EventSource 对 象 ) 
作为 全 局 变量 的 唯一 原因 。 

















在 浏览 器 中 访问 basic_with_sleep.html1， 会 看 到 如 下 输出 : 


Initializing... 

In connect 

{"t":"2014-02-28 09:46:34"} 
{"t":"2014-02-28 09:46:35"} 
{"t":"2014-02-28 09:46:36"} 
{"msg":"About to sleep 10s"} 
In connect 

{"t":"2014-02-28 09:46:42"} 
{"comeBackIn10s":true} 

In connect 

{"t":"2014-02-28 09:46:53"} 
{"t":"2014-02-28 09:46:54"} 


当 进 入 休眠 时 ， 不 会 收 到 任何 新 数据 ， 所 以 5 秒 后 长 连接 计时 器 生效 ， 关 闭 了 旧 的 连接 ， 
并 开局 了 一 个 新 连接 ， 所 以 会 看 到 6 秒 的 间隔 。 当 它 说 10 秒 后 回来 时 ， 这 里 关闭 了 连接 ， 
关闭 了 长 连接 计时 器 ， 并 且 礼 貌 地 小 睡 了 10 秒 ， 所 以 时 间 改 里 有 一 个 11 秒 的 间隔 。 


B.2 ”问题 是 …… 

en 两 个 连接 。 运 行 本 书 源码 的 basic_with_sleep.two.html。 这 里 不 会 展示 那 段 代码 ， 因 为 
它 太 可 怕 了 : 有 7 个 全 局 变量 ,以 及 8 个 全 局 函数 。 写 这 段 代 码 需 要 注意 力 高 度 集中 ， 即 
便 如 此 ， 我 还 是 搞 错 了 ， 不 得 不 在 Firebug 中 调试 它们 。 好 吧 ， 你 是 对 的 ， 全 局 变量 不 好 。 

















公平 起 见 ，basic_with_sleep.two.html 里 的 代码 是 非常 原始 、 原 生 的 。 用 两 个 
带 参 数 的 辅助 函数 可 以 使 它 看 上 去 好 一 点 (就 像 是 一 个 戴 着 假发 和 珍 娜 - 路 
易 斯 : 科 尔 曼 面具 的 假 人 ， 当 你 次 上 去 想 末 一 下 时 却 发 现 有 点 不 对 劲 ……: 5 





所 以 ， 需 要 做 一 些 事情 。 后 面 会 介绍 并 比较 两 种 JavaScript 解决 方案 。 
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B.3 JavaScript 对 象 和 构造 函数 


JavaScript 是 面向 对 象 的 语言 ， 或 者 说 它 自称 是 。 如 果 你 觉得 争论 这 个 是 件 有 意义 的 事 ， 
大 可 在 自己 有 空 时 去 做 ， 不 是 现在 ， 不 是 这 里 。 示 例 代 码 有 点 像 对 象 ， 那 把 它 做 成 一 个 
JavaScript 对 象 如 何 ? 那 4 个 全 局 变量 可 以 作为 成 员 变 量 ，4 个 函数 作为 成 员 函 数 。 











关于 这 个 主题 有 一 个 很 赞 的 资料 ， 就 是 John Resig 和 Bear Bibeault 写 的 Secrets of the 
JavaScript Ninja (Manning，2012)。 


来 快速 回顾 一 下 JavaScript 对 象 ， 但 在 那 之 前 ， 来 快速 回顾 一 下 JavaScript 函数 ， 特 别 是 
this 变量 。 函 数 是 JavaScript 一 等 对 象 ， 意 思 是 它们 可 以 作为 参数 传递 ， 定 义 回调 函数 很 容 
易 ， 它 们 可 以 被 赋予 一 些 属性 。 可 以 给 函数 传 参数 。 但 也 有 两 个 隐 式 传 入 的 参数 。 一 个 是 
arguments， 这 个 参数 个 数 不 定 的 函数 很 有 用 。 男 一 个 是 this， 它 指向 函数 的 上 下 文 ， 并且 
this 总 是 有 定义 的 ， 即 便 函 数 不 是 一 个 类 的 一 部 分 。 当 用 普通 方式 调用 函数 时 ，this 是 全 
局 作用 域 (在 浏览 器 中 等 同 于 window)。 当 函数 作为 一 个 对 象 的 成 员 调 用 时 ，this 指向 这 
个 对 象 。 当 函数 是 一 个 DOM 事件 回调 时 ，this 是 触发 事件 的 DOM 对象。 

函数 也 可 以 用 new 关键 字 调 用 ， 这 样 是 将 函数 当成 一 个 构造 函数 。 但 是 在 JavaScript 中 ， 
构造 函数 也 等 同 于 其 他 语言 中 的 class 关键 字 。 它 不 仅 做 了 初始 化 ， 也 会 描述 这 个 对 象 里 
有 什么 。 所 以 ， 在 构造 函数 里 ，this 指向 新 创建 的 对 象 ， 下 面 是 例子 : 


function MyClass(constructorParam) { 
var privateVariable = "hello"; 
































this.publicVariable = "world"; 


var privateFunction = function (a, b) { 


console.log(a + " " + b + constructorPparam); 
}; 

this.publicFunction = function () { 
privateFunction( 
privateVariable, 


this.publicVariable 
); 


} 
然后 可 以 像 下 面 这 样 使 用 : 














var x = new MyClass("!"); 
x.publicFunction(); 


(这 段 代 码 会 在 控制 台 输 出 “hello world!”。) 


注意 ，constructorParam 和 privateVariable 如 何 表 现 得 像 全 局 变量 但 却 只 能 在 MyClass 的 
公有 和 私有 成 员 函 数 中 访问 到 。 完 美 ! 
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B.4 用 对 象 的 代码 


所 以 ， 要 做 一 个 对 象 ， 只 需 将 所 有 代码 都 包 在 一 个 构造 国 数 中 ， 然 后 在 所 有 东西 前 面 加 上 
this. ? 代码 如 下 所 示 : 





<!doctype htmL> 

<htmL> 

<head> 

<meta charset="UTF-8"> 
<title>SSE: Basic With SLeep: 00P (doesn’ t work)</title> 
</head> 

<body> 

<pre id="x">Initializing...</pre> 
<script> 

function SSE(url, domId) { 
this.es = null; 
this.keepaliveSecs = 5; 
this.keepaliveTimer = null; 


this.gotActivity = function () { 
if (this.keepaliveTimer != null) 
clearTimeout(this.keepaliveTimer); 
this.keepaliveTimer = setTimeout( 
this.connect, this.keepaliveSecs * 1000); 


}; 


this.connect = function () { 
document .getELementById(domId) . 
innerHTML += "\nIn connect"; 
if (this.es)this.es.close(); 
this.es = new EventSource(url); 
this.es.addEventListener( ‘message’” ， 
function (e) {this.processOneLine(e.data); }， 
false); 
this .gotActivity(); 
}; 


this.processOneLine = function (s) { 

this .gotActivity(); 

document .getElementById(domId). 
innerHTML += "\n" + S; 

var d = JSON.parse(s); 


if (d.comeBackIn10s) { 
if (this.keepaliveTimer != null) 
clearTimeout(this.keepaliveTimer); 
if (this.es)this.es.close(); 
setTimeout(this.connect, 10 * 1000); 
} 
}; 


this.connect(); 


} 
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setTimeout(function () {new SSE("basic_with_sLeep.php"，"x"); }, 100); 


</script> 

</body> 

</html> 
将 它 保存 为 basic_with_sleep.oopl.html， 然 后 在 浏览 器 中 访问 。 呢 …… 什么 都 没有 。 
Firebug 会 报错 :“TypeError: this.processOneLine is not a function”。 响 ,是 这 样 的 。 
浏览 器 到 底 把 this.processOneLine = func tion(s){...} 当成 什么 意思 了 呢 ?! 没有 比 这 更 
像 函 数 的 了 。 肯 定 是 浏览 器 bug。 





不 。 问 题 是 this 在 那 一 行 是 别 的 意思 ， 它 是 EventSource 对 象 的 “message” 事 件 处 理 程 
序 。 所 以 在 那个 事件 处 理 程序 中 this 不 是 指向 SSE 对 象 ， 而 是 指向 EventSource 对 象 。 








也 许可 以 聪明 一 点 ， 把 processOneLine 移 到 es 上 ， 这 样 它 就 能 被 发 现 。 但 是 这 样 的 话 
processoneLine 中 所 有 对 this 的 引用 就 不 生效 了 。 不 ， 这 个 方法 不 对 。 有 一 种 更 简单 的 方 
法 ， 在 构造 函数 的 上 部 ， 用 一 个 叫 self 的 私有 变量 引用 到 this: 


function SSE(url,domId){ 
var self = this; 





其 他 唯一 需要 做 的 修改 就 是 把 “message” 事 件 处 理 程序 中 的 this. 改 为 self.。 没 有 其 他 
地 方 需要 修改 了 ， 只 有 那里 。 


事实 上 ， 可 以 把 整个 类 中 所 有 对 this 的 引用 改 为 self。 你 甚至 可 以 认为 这 
更 加 优雅 整洁 ， 因 此 更 好 。 





| 





this.es.addEventListener('message', 
function(e){self.processOneLine(e.data);}, 
false); 


basic_with_sleep.oop2.html 是 这 么 做 的 ， 试 一 下 会 发 现 这 个 简单 的 修改 是 有 效 的 。 耶 ! 面 


向 对 象 的 JavaScript 挽救 了 局 面 。 计 算 机 科学 家 们 深 葛 一 躬 ， 然 后 写 了 一 个 递归 函数 相互 
拍 背 以 示 安 奈 。 

















但 还 没有 完 。 你 不 好 奇 为 什么 用 self 会 有 效 ? 你 不 好 奇 为 什么 url 和 domld 不 用 显 式 地 传 
入 就 能 被 所 有 函数 访问 到 ? 


B.5 JavaScript 闭 包 


这 样 可 行 的 原因 是 闭 包 。 不 了 解 闭 包 也 可 以 用 JavaScript 做 很 多 事 ， 但 了 解 闭 包 能 会 让 你 
能 量 大 增 。 闭 包 的 基本 意思 是 ， 每 次 创建 一 个 函数 ， 它 就 在 那 一 刻 给 作用 域 中 所 有 的 变量 
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重 构 : JavaScript 全 局 变 


提供 了 引用 。 这 里 不 再 讨论 过 多 细节 ， 更 深层 次 的 解释 参见 John Resig 和 Bear Bibeault 写 
的 Secrets of the JavaScript Ninia ( 曼 末 ，2012)。 


这 意味 着 在 构造 国 数 中 ， 用 var 定义 一 个 变量 时 ， 这 个 变量 可 以 被 接 下 来 定义 的 每 一 个 函数 
访问 到 。 此 外 ， 就 如 上 一 节 介 绍 的 self 例子 ， 它 们 也 可 以 被 这 些 函 数 中 定义 的 函数 访问 到 '。 
看 来 我 们 就 像 公牛 闯 进 了 瓷器 店 一 样 ， 深 陷于 将 this. 拍 在 任何 东西 前 面 ， 甚 实 有 更 简单 的 方 
式 。 回 到 原来 的 代码 ， 有 4 个 全 局 变量 和 4 个 全 局 函数 。url 是 参数 ， 所 以 把 它 移 除 ， 但 在 其 
他 3 个 全 局 变量 前 面 加 上 构造 函数 的 定义 ， 在 最 后 结束 构造 图 数 定 义 ， 并 且 调用 connect(): 























function SSE(uUrL){ 

var es = null; 

var keepaliveSecs = 5; 

var keepaliveTimer = null; 


. (functions, untouched) 


connect(); 


} 
首先 创建 一 个 实例 : 


setTimeout(function(){ 
new SSE("basic with_sleep.php"); 
}, 100); 
如 果 在 浏览 器 中 运行 这 段 代 码 ， 它 就 会 生效 (参见 本 书 源码 的 basic_with_sleep.oop3.html) 。 
所 有 加 在 成 员 变 量 或 函数 前 面 的 this. 都 不 是 必须 的 ，self 这 个 别名 也 不 是 必须 的 。 


经 验 教训 总 结 : 如 果 有 一 些 全 局 变量 ， 以 及 一 些 操 作 它 们 的 全 局 函数 ， 并 且 外 部 访问 那些 
函数 有 一 个 唯一 的 入 口 ， 那 就 把 这 些 整 个 封装 到 一 个 构造 函数 中 。 在 构造 函数 的 最 后 调 
用 入 口 函 数 ， 事 情 就 做 完了 。( 如 果 有 其 他 的 外 部 访问 入 口 ， 大 可 添加 一 些 公 有 函数 ， 用 
this.XXX = function(){...} 来 定义 ,) 


两 个 人 的 茶 和 两 种 茶 

要 用 新 构造 国 数 来 运行 两 个 连接 ， 并 且 使 它们 并 排 更 新 ， 只 需 做 一 些 快速 修改 。 为 它们 添 
加 一 个 独立 的 DOM 入 口 (id="y")。 给 构造 函数 添加 一 个 domId 参数 。 最 终 ， 实 例 化 第 二 
个 对 象 ( 这 里 的 代码 用 了 第 二 个 计时 器 ， 在 第 一 个 计时 器 开始 之 后 的 两 秒 开始 )。 





完整 代码 (basic_with_sleep.oop3.two.html) 如 下 所 示 : 

















注 1: 注意 ， 被 传 来 传 去 的 所 有 这 些 东 西 使 你 的 脚本 变 慢 了 ， 这 也 是 要 理解 闭 包 的 另 一 个 原因 。 所 有 这 些 
Function 构造 函数 ， 或 者 用 一 个 函数 工厂 ， 是 两 种 避免 团 包 的 方法 。 
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<!doctype htmL> 

<htmL> 

<head> 
<meta charset="UTF-8"> 
<titLe>SSE: Basic With Sleep: Simple O0P and Two Instances</title> 
<style> 
pre {float: left;margin: 10px;} 
</style> 

</head> 
<body> 
<pre id="x">Initializing X...</pre> 
<pre id="y">Initializing Y...</pre> 


<script> 

function SSE(url, domId) { 
var es = null; 

var keepaliveSecs = 5; 

var keepaliveTimer = nuLL; 


function gotActivity() { 

if (keepaliveTimer != nuLL) 
clearTimeout(keepaliveTimer); 

keepaliveTimer = setTimeout( 
connect, keepaliveSecs * 1000); 


3 


function connect() { 
document .getELementById(domId ) . 
innerHTML += "\nIn connect"; 
if (es)es.close(); 
gotActivity(); 
es = new EventSource(url); 
es.addEventListener("message", 
function (e) {processOneLine(e.data);}, 
false); 
} 


function processOneLine(s) { 

gotActivity(); 

document .getElLementById(domId). 
innerHTML += "\n" + s; 

var d = JSON.parse(s); 


if (d.comeBackIn10s) { 
if (keepaliveTimer != null) 
clearTimeout(keepaliveTimer); 
if (es)es.close(); 
setTimeout(connect, 10 * 1000); 
} 

} 


connect(); 


} 





重 构 : JavaScript 全 局 变量 、 对象 和 闭 包 
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setTimeout(function () { 
new SSE("basic with_sleep.php", "x"); 
}, 100); 

setTimeout(function () { 
new SSE("basic with_sleep.php", "y"); 
}, 2000); 

</script> 

</body> 


</html> 


切记 现代 浏览 器 一 般 允 许 向 一 个 域名 建立 最 多 6 个 连接 (并 且 这 6 个 连接 包 
含 了 图 片 请 求 和 Ajax 请 求 )。 所 以 如 果 你 试图 在 前 面 的 测试 页 添加 大 量 的 





SSE 对 象 ， 你 只 能 看 到 最 前 面 的 6 个 有 更 新 。 











但 也 不 要 这 样 做 。 无 论 什么 情况 都 可 以 用 一 个 SSE 连接 获取 所 有 消息 。 如 果 








它们 用 作 应 用 的 不 同 部 分 ， 可 以 用 一 个 


JSON 字段 指定 消息 类 型 。 


不 过 ， 对 不 同 服务 器 的 并 发 连接 没有 限制 ， 这 就 是 本 附录 的 代码 发 挥 作用 的 








时 候 了 。 
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附录 B 


附录 C 
PHP 





PHP 被 选 为 本 书 示 例 的 主要 语言 ， 这 有 多 方面 的 原因 。 当 和 Apache 结合 使 用 时 ， 可 使 示 
例 代码 相当 短 ， 只 需 非常 少 的 框架 代码 。 语 法 很 简单 ， 任 何 熟 悉 主 流 编程 语言 的 人 都 能 
懂 。 而 且 它 非常 符合 SSE 的 既 存 基础 设施 优势 (参见 1.5 节 )， 因 为 很 多 人 的 既 存 基础 设 
施 已 经 建立 在 PHP 之 上 了 。 








如 我 所 说 ， 我 已 经 尽力 使 PHP 代码 对 任何 程序 员 都 是 可 读 的 。 本 附录 介绍 了 一 些 PHP 专 
有 的 特性 。 用 到 这 些 特 性 时 ， 相 关 解 释 可 参考 本 附录 提 到 的 相关 小 市 。 


本 附录 并 不 是 PHP 的 概述 。 有 无 数 关 于 这 方面 的 书籍 和 网 站 。PHP 手册 (http://www. 
php.net/manual/zh/) 是 一 个 非常 好 的 入 门 资料 。 如 果 你 在 找 关 于 动态 网 站 的 书 ，Robin 
Nixon 的 Learning PHP, MySOL, JavaScript, and CSS (O’Reilly, http://shop.oreilly.com/ 
product/0636920023487.do) 很 全 面 ，Kevin Tatroe、Peter MacIntyre 和 Rasmus Lerdorf 合 车 
的 Programming PHP (O’Reilly,，http://shop.oreilly.com/product/0636920012443.do) 也 是 关 
于 动态 网 页 的 ， 主 要 关注 PHP 语言 本 身 。 




















C.1 PHP 中 的 类 


PHP ( 自 PHP5 起 ) 中 的 类 更 像 CH+、C# 和 Java 中 的 类 ， 而 不 太 像 JavaScript 中 的 类 。 但 
如 果 你 之 前 用 过 任何 面向 对 象 语言 ， 应 该 不 难 理解 本 书 用 到 的 代码 。 






































类 中 的 每 个 要 素 都 有 一 个 访问 修饰 符 前 级 : public 或 private。 函 数 的 定义 以 function 关 
键 字 开始 ， 没 有 function 前 绥 的 项 就 是 成 员 变 量 。 构 造 国 数 是 对 象 创建 时 运行 的 函数 ， 称 
为 _construct()。 所 以 fxpair.seconds.php 中 封装 了 一 些 private 变量 、 一 个 初始 化 那些 变 
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量 的 构造 函数 以 及 一 个 用 那些 私有 变量 和 参数 做 一 些 事 的 公有 函数 。 


成 员 变 量 (以 及 成 员 函 数 ) 通过 Sthis-> 前 级 访问 ， 这 和 JavaScript 中 用 this. 前 级 类 似 。 
在 其 他 面向 对 象 的 语言 ， 比 如 C++， 用 this. 是 可 选 的 (虽然 有 些 风格 指南 建议 这 样 做 )。 























更 多 关于 PHP 的 面向 对 象 特性 ， 参 见 手册 http://cn2.php.net/manual/zh/language.oop5.basic.php。 


C.2 随机 函数 


PHP 有 rand 和 mt_rand 函数 ， 如 何 选 用 它们 ?本 书 使 用 mt_rand。MT 是 指 Mersenne 
Twister (梅森 旋转 算法 )， 这 种 算法 可 以 生成 更 优质 的 随机 数 。 (有 些 地 方 声称 mt_rand 明 
显 更 快 ， 有 些 认为 rand 和 mt_rand 的 速度 是 一 样 的 ， 这 其 实 取决 于 操作 系统 和 PHP 版 
本 。) 


用 mt_srand 设置 mt_rand 的 随机 种 子 。 每 次 都 设置 同样 的 随机 种 子 可 以 每 次 都 获取 相同 的 
“随机 ” 数 序列 。 这 非常 利于 可 复 现 测试 。 如 果 每 次 都 要 不 同 的 随机 数 ， 就 不 是 特别 需要 
用 mt_srand 了 ， 因 为 PHP 会 初始 化 随机 种 子 (基于 当前 服务 器 时 钟 )。 


C.3 超 全 局 变量 


PHP 有 一 些 超 全 局 变量 ， 可 以 被 所 有 国 数 访问 到 ， 这 些 变量 提供 了 解析 好 的 请 求 信息 和 服 
务 器 环境 信息 。 它 们 都 是 关联 数组 。$_GET 是 HTTP GET 数据 ，$_P0ST 是 HTTP POST 数 
据 ，$_COOKIES 是 什么 ? 你 猜 吧 。$_SERVER 会 提供 关于 请 求 的 其 他 信息 ， 而 $_ENV 提供 所 
运行 的 服务 器 信息 。$GLOBALS 可 用 以 访问 用 户 定义 的 全 局 变量 。 












































还 有 $_REQUEST， 它 合并 了 所 有 的 $_GET、$_P0ST 和 $_COOKIES。 要 注意 的 是 ， 一 般 不 鼓励 
使 用 $_REQUEST， 因 为 会 有 Cookie 数据 覆盖 表单 数据 的 安全 隐患 。 当 你 关心 的 所 有 变量 
效 地 来 自任 何 GET、POST 或 Cookie 数据 时 ， 才 使 用 且 仅 使 用 $_REQUEST。 











但 是 ， 要 注意 从 PHP 5.3 起 ， 默 认 的 php.ini 文件 会 将 Cookie 数据 从 $_REQUEST 排除 。( 参 
见 http://php.net/request_order。) 所 以 ， 如 果 想 允许 Cookie 包含 在 $_REQUEST 中 ， 需 要 设 
置 request order 为 “CGP”。 把 “C” 放 在 首位 ， 这 样 POST 数据 优先 级 高 于 GET 数据 ， 
GET 数据 优先 级 高 于 Cookie 数据 。 


C.4 数据 处 理 

PHP 有 一 些 强大 的 处 理 时 间 和 日 期 的 函数 。time 返回 自 1970 年 到 现在 的 秒 数 ， 这 一 点 在 
前 面 介绍 过 。 还 有 两 个 前 面 介绍 过 的 函数 ，date() 和 gmdate()。 它 们 分 别 将 Unix 时 间 转 
化 为 当地 时 间 字 符 串 和 GMT 时间， 都 有 大 量 可 选择 的 格式 (参见 http://php.net/date)。 
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如 果 要 说 哪个 PHP 函数 是 我 在 用 其 他 语言 时 最 想念 的 ， 那 就 是 strtotime()。 这 个 国 数 
接收 一 个 字符 串 格 式 的 日 期 并 返回 Unix 时 间 ( 自 1970 年 1 月 1 日 起 的 秒 数 )。 当 然 它 
也 可 以 处 理 标 准时 间 惟 格式 ， 比 如 “2013-12-25 13:25:50”， 也 可 以 处 理 用 单词 表示 的 
月 份 ， 比 如 “5th December 2013”。 但 还 有 更 好 的 ! 可 以 指定 日 期 偏 移 量 ， 所 以 可 以 这 
样 写 strtotime("+1 day") 来 获取 从 现在 开始 24 小 时 后 的 时 间 惟 ,可 以 写 “last day of 
February”， 可 以 写 “next month”、“last Thursday” 等 。 











在 默认 情况 下 ， 计 算是 相对 于 当前 时 间 的 。 但 是 可 以 通过 指定 第 二 个 参数 使 它 相 对 于 其 他 时 间 。 
并 且 第 二 个 参数 也 可 以 用 strtotime | 下 面 是 找 出 2001 年 圣诞 节 前 最 后 一 个 星期 五 的 例子 : 























sfriday = strtotime("last Friday", 

strtotime("2001-12-25")); 
echo date("Y-m-d",s$friday); 
//2001-12-21 


C.5 ”密码 


用 户 密码 显然 不 能 以 明文 存储 在 数据 库 中 。 加 密 通常 也 不 是 好 办 法 : 如 果 密 钥 被 盗 ， 所 有 
的 密码 都 会 泄漏 。 应 该 散 列 密码 而 不 是 加 密 。 散 列 是 一 个 单 向 处 理 过 程 : 对 一 个 明文 密码 
进行 一 系列 的 数学 运算 来 获得 一 个 随机 字符 串 。 不 能 逆向 操作 ， 也 没有 密 钥 会 被 盗 。 但 是 
指定 相同 的 明文 密码 ， 总 是 能 用 算法 获得 相同 的 散 列 密码 。 

但 是 ， 由 于 有 人 制造 了 越 来 越 快 的 电脑 来 黑 你 ， 你 第 第 的 密码 散 列 算法 已 经 不 够 好 了 。 在 
过 去 ，md5() 就 够 用 了 ， 如 果 你 拿 satt 和 它 一 起 用 ， 你 就 可 以 在 满 是 书 呆 子 的 公司 里 面 吊 
首 挺 胸 了 。 但 现在 不 是 了 。 





















































自 PHP 5$.5.0 之 后 ， 安 全 最 佳 实践 是 用 password_hash() 生 成 密码 ， 用 password_ 
verify() 验证 。 如 果 在 用 早期 版 本 的 PHP， 可 以 将 下 面 这 段 代码 加 到 脚本 ' 最 上 玫 
(if(!defined(...)) {...} 意思 是 在 PHP 5.5 之 后 的 版 本 会 忽略 这 段 代码 ) : 


























if (!defined("PASSWORD_DEFAULT")) { 

function password_hash($password) { 

$salt = str_replace("+", ".", base64 encode(shal(time(), true))); 
$salt = substr($salt, 0, 22); //We want exactly 22 characters 

if (PHP_VERSION_ID < 50307) return crypt($password, '$2a$10$' . $salt); 
else return crypt($password, '$2y$10$' . $salt); 

} 


function password_verify($password, $hash) { 
return crypt($password, $hash) === Shash; 


} //if (!1defined('PASSWORD_DEFAULT')) 结束 





注 1: 更 全 面 的 版 本 参见 https://github.com/iremaxell/password_compat。 








PHP 5.3.7 引入 了 一 种 新 的 、 更 好 的 散 列 算法 。 上 面 的 代码 在 PHP 5.3.7 之 后 用 这 种 算法 ， 
否则 就 使 用 在 那 之 前 更 好 的 选择 。'$2y$16$' 中 的 10 是 用 以 检测 有 多 慢 的 。 在 密码 散 列 的 
怪异 世界 里 ， 慢 是 好 事 。10 是 自 PHP 5.5 以 来 的 默认 值 。 它 的 意思 是 密码 散 列 可 能 会 占用 
较 多 的 CPU 资源 。 如 果 要 微调 这 些 参 数 ， 可 以 参考 PHP 手册 关于 这 些 函 数 的 描述 。 为 防 
止 过 时 ， 用 一 个 VARCHAR(255) 字段 将 密码 散 列 存储 到 SQL 数据 库 中 ， 虽 然 目 前 它们 总 是 
整整 长 60 字符 。 


C.6 休眠 


PHP 中 有 两 个 容易 混 光 的 函数 :sleep() 和 ustLeep()。 前 者 接收 一 个 表示 休眠 秒 数 的 整 
数 ， 后 者 也 接收 一 个 整数 ， 但 是 作为 休眠 的 微 秒 数 。 所 以 ， 举 个 例子 来 说 ，stLeep(2) 和 
ustLeep(2000000) 是 等 效 的 ， 都 会 使 脚本 休 眼 2 秒 。 但 是 ， 如 果 想 要 休眠 0.25 秒 或 者 1.5 
秒 ， 唯 一 的 选择 是 用 usleep (分 别 是 usLeep(250000) 和 usLeep(1500000) ) 。 
































是 时 候 提 一 下 max_execution_time (一 个 配置 项 ) 和 set_time_Limit() ( 重 置 max_execution_ 
time 的 函数 ) 了 。0 这 个 特殊 的 值 表示 “一 直 运行 ”， 这 是 从 命令 行 运行 脚本 的 默认 值 。 但 
是 ， 在 网 络 浏览 器 中 ， 默 认 值 是 30 秒 。 在 Linux/Mac 系统 中 ,是 30 秒 的 CPU 时 间 。 但 在 
Windows 系统 ， 是 用 挂钟 时 间 衡 量 的 。 对 一 个 流 数 据 服务 器 来 说 ，30 秒 会 非常 快 ， 除 非 
看 着 浏览 器 控制 台 才 会 注意 到 。 但 SSE 脚本 最 终 会 每 30 秒 重 连 后 端 。( 除 非 在 做 密集 型 计 
算 ， 在 Linux 上 儿 十 分 钟 甚至 数 小 时 都 不 会 注意 到 。) 











解决 办 法 很 简单 : 在 脚本 的 最 上 面 加 上 下 面 这 行 代码 : 


set_time_limit(0); 
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封面 介绍 





本 书 封面 动物 是 一 只 短 吻 针 嗣 (澳洲 针 组 )。 只 有 四 种 针 毁 以 及 胞 嘴 兽 是 卵 生 而 非 胎生 的 
哺乳 动物 。 澳 洲 针 脆 分 布 在 澳大利亚 的 森林 地 区 ( 它 是 那里 分 布 最 广泛 的 “土著 ”哺乳 动 
物 ) 和 新 儿 内 亚 的 部 分 地 区 。 


澳洲 针 归 身长 30 厘米 至 45 厘米 ， 皮 毛 呈 棕色 ， 背 上 覆 有 奶油 色 的 刺 〈 由 角 蛋 白 构成 )。 
短 吻 针 器 名 副 其 实 ， 它 们 的 吻 大 约 8 厘米 长 ， 比 其 他 种 类 针 器 的 吻 短 。 这 个 皮质 的 吻 有 几 
个 用 途 : 外 观 呈 枢 形 利于 探查 昆虫 堆 ， 吻 中 有 电感 受 器 ， 可 帮助 探测 附近 的 猎物 ;迷宫 一 
样 的 骨 结 构 被 认为 可 以 帮助 凝结 燕 发 的 水 蒸气 以 及 使 自身 降温 〈 由 于 针 器 没有 评 腺 )。 


针 虑 有 时 被 称 为 带刺 的 食 蚁 兽 ， 然 而 因为 它们 与 真正 的 食 蚁 兽 没 有 关系 ， 这 个 名 字 也 就 不 
再 用 了 。 它 们 以 昆虫 为 食 ,， 但 主要 是 蚂蚁 和 和 白蚁， 它们 会 挖 开 昆 虫 的 洞穴 ， 然 后 用 它们 又 
长 又 粘 的 舌头 捕获 猎物 。 针 器 是 挖掘 专家 ， 这 得 益 于 它们 特别 的 爪子 和 得 而 强壮 的 四 肢 。 
除了 猎 食 ， 它 们 挖 铜 也 是 一 种 防御 手段 ， 如 果 受 到 威胁 ， 它 们 会 非常 迅速 的 挖 地 洞 钻 进 
去 ， 将 身体 卷 成 一 个 球 ， 只 把 锋利 的 刺 露 在 外 面 。 它 们 也 是 游泳 健将 ， 可 以 只 把 具 子 露出 
水 面 ， 就 像 一 个 潜水 通气 管 。 


短 吻 针 吴 出 现在 了 澳大利亚 5 分 硬币 的 背面 ， 并 且 成 了 经 典 电子 游戏 《 刺 独 索尼 克 》 系 列 
里 的 角色 纳 克 尔 兹 。 












































封面 图 片 来 自 Wood 的 Animate Creation。 
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欢迎 加 入 


灵 社 区 ituring.com.cn 





最 前 沿 的 上 T 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 犹豫 衍 香 的 时 候 ， 图 灵 社 区 已 经 采取 实 
际 行动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 开 类 出 版 商 ， 图 灵 社 区 目前 为 读者 
提供 两 种 DRM-free 的 阅读 体验 : 在 线 阅 读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩 
色 图 片 ( 即使 有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 
图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 
稿 、 编 辑 网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 “敏捷 出 
版 ”， 它 可 以 让 读者 以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 往 翻 译 版 技术 书 
“出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 提前 消灭 
书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 的 质量 。 


优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 多 换 纸 质 样 书 。 













































































最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ” 
功能 ， 你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。( 收 
费 形式 须 经 过 图 灵 社 区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 的 意愿 ， 图 灵 
社区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 
书 ， 欢 迎 你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 
地 完成 一 本 书 的 翻译 工作 ， 是 需要 有 坚强 的 儿 力 的 。 


最 直接 的 读者 交流 平台 


在 图 灵 社 区 ,你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 
编辑 人 员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 
你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 赢 取 积 分 和 银子 ， 积 累 个 人 
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名 加 图 灵 最 新 重点 图 书 





国内 第 一 本 Swift 开发 教程 


> 
a 也 ” 配 有 同步 习题 、 同 步 视频 教程 ， 并 全 程 展现 即将 
上 线 的 iPhone 计算 器 项 目 


分 层 架构 设计 解决 Swift 与 Objective-C 混 
合 搭配 问题 


也” 畅销 书 《iOS 开发 指南 》 作 者 关东 升 最 新 著作 
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HTML65 数 据 推送 应 用 开发 


如 今 ， 数 据 推送 技术 在 网 站 和 Web 应 用 中 得 到 了 广泛 应 用 ， 比 如 在 拍卖 
网 络 应 用 中 推送 最 新 出 价 ， 在 售 书 网 站 推送 新 评论 ， 在 在 线 游戏 中 推送 
新 高 分 ， 推 送 用 户 感 兴趣 的 最 新 微 博 ， 等 等 。 


本 书 是 一 本 简明 的 数据 推送 技术 指南 ， 作 者 通过 构建 一 个 真实 的 例子 ， 
手把手 地 向 读者 展示 如 何 利 用 HTML5 SSE (Server-Sent Events， 服 务 端 
推送 事件 ) 这 项 非凡 的 技术 ， 无 需 轮 询 或 者 用 户 交互 ， 就 可 以 将 最 新 数 
据 从 服务 端 推送 到 客户 端 。 


此 外 ， 本 书 还 比较 了 数据 推送 和 WebSocket 的 区 别 ， 阐 释 了 如 何 使 用 不 
同 的 向 后 兼容 解决 方案 ， 将 应 用 的 桌面 和 移动 浏览 器 支持 率 从 60% 增 加 
到 99%。 只 要 熟悉 HTML、HTTP 和 基本 的 JavaScript， 就 可 以 开始 你 的 学 
习 之 旅 。 

本 书 主要 内 容 : 

国 比较 SSE、WebSocket 或 者 数据 拉 取 方案 的 区 别 ， 以 便 你 在 解决 

手头 的 问题 时 自如 选择 

四 开发 一 个 包含 后 端 和 前 端 解决 方案 的 实际 SSE 应 用 

加 解决 错误 处 理 、 系 统 恢复 和 其 他 问题 ， 使 应 用 达到 产品 水 准 

国 分 析 不 支持 SSE 的 浏览 器 的 两 种 向 后 兼容 解决 方案 

罩 处 理 安全 问题 ， 包 括 认 证 授权 和 不 允许 的 域 

四 开发 在 测试 驱动 SSE 设 计 中 有 用 的 实际 、 可 重用 的 数据 

国 学 习 示 例 应 用 中 不 包含 的 SSE 协 议 元 素 





Darren Cook 精通 多 种 计算 机 语言 ， 包 括 JavaScript、PHP 以 及 C++， 拥 有 20 
多 年 软件 开发 及 项 目 管理 经 验 ， 涉 及 金融 交易 系统 、 数 据 可 视 化 工具 、 世 
界 级 公司 的 网 站 乃至 电子 游戏 。 他 开发 过 类 似 Twitter 的 HTTP 流 数据 网 络 服 
务 系统 ， 还 为 许多 应 用 写 过 底层 的 套 接 字 服 务 端 /客户 端 协议 ， 构 建 过 使 用 
SSE 和 WebSocket 的 应 用 。 


“数据 推送 是 Web 应 用 所 涉及 的 


一 项 关键 技术 ， 本 书 会 告诉 你 
如 何 利用 最 新 的 HTML5 技 术 予 
以 实现 ， 并 展示 各 种 向 后 兼容 
方案 的 选择 。 不 过 在 使 用 之 前 
你 仍然 要 回答 这 个 问题 : 你 的 
Web 应 用 到 底 是 否 需 要 使 用 数 
据 推送 ? 当然 ， 在 你 阅读 完 本 
书 之 后 ， 答 案 便 了 然 于 心 。” 
一 一 贾 铮 


百度 资深 研发 工程 师 


“如 果 你 希望 一 有 最 新 消息 发 布 ， 


你 的 Web 客 户 端 就 立即 更 新 ， 

那么 就 来 学 习 本 书 吧 。 本 书展 

示 了 利用 HTML5 和 数据 推送 技 

术 ， 使 你 的 用 户 在 几乎 所 有 现 
代 平 台 上 及 时 收 到 最 新 消息 。” 

一 一 Peter Maclntyre 

Paladin Business Solutions 总 裁 


“HTML5 SSE 是 响应 式 动 态 交 


互 Web 前 端的 未 来 趋势 。 本 书 
阐述 了 如 何在 客户 端 和 服务 端 
实现 SSE。 此 外 ， 你 还 将 学 到 
PHP 的 相关 知识 ， 以 及 如 何 设 
计 高 性 能 、 安 全 的 Web 应 用 。” 
——Stuart Woodward 
HanamaruK.K. 高 级 软件 架构 师 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com ， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 
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